@extends('layouts.admin')
@section('header_style')
    <link href="{{asset('assets/plugins/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('assets/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css')}}" rel="stylesheet"      type="text/css"/>
    <link href="{{asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')}}" rel="stylesheet"      type="text/css"/>
    <style type="text/css">
        td { 
            font-size: 14px !important; 
        }
        .d-none{
            display: none;
        }
        .nav-item.active{
            background-color: #67AAB3;
        }
        .nav-link.active{
            background-color: #A0C6CF;
        }
    </style>
@endsection
@section('content')
<div style="min-height: 75vh; max-height: 75vh; height: 75vh; overflow: auto;">
    <form method="POST" enctype="multipart/form-data" action="{{route('agent.update.details')}}">
        @csrf
        <div class="top-baar">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="nav nav-tabs">
                        <li class="nav-item" id="detail_tab">
                            <a class="nav-link active" id="detail_link" onclick="ChangeForm('agent_detail','detail_tab','detail_link');"><b>Details</b></a>
                        </li>
                        <li class="nav-item" id="contact_tab">
                            <a class="nav-link" id="contact_link" onclick="ChangeForm('agent_contact','contact_tab','contact_link');"><b>Contacts</b></a>
                        </li>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <div class="Save"><button type="submit" class="btn btn-success" style="float: right;padding-right: 20px;padding-left: 20px;margin-right: 10px;">SAVE</button></div>
                            <div class="Discard"><a href="{{ route('agent.index') }}" class="btn btn-danger px-4 py-1" style="float: right;margin-right: 10px;">DISCARD</a></div>
                        </div>
                    </ul>
                    
                </div> 
            </nav>   
        </div>
        <div id="agent_detail" class="card mt-1 mx-2" style="padding-left:20px;">
            <div class="col-2 ml-8 pl-8">
                <div class="form-group row my-0 pt-5">
                    <!-- <label class="col-sm-2 form-label pt-1 text-left">Code :</label>
                    <div class="col-sm-3 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="code" id="code" class="form-control" value="{{$agents[0]->code}}" >
                        
                    </div> -->
                    <label class="col-sm-2 form-label pt-1 text-left">Name* :</label>
                    <div class="col-sm-3 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="name" id="name" class="form-control" value="{{$agents[0]->name}}" required>
                    </div>
                    <div class="mx-3"> 
                        <input autocomplete="off" type="hidden" name="a_id" id="a_id" class="form-control" value="{{$id}}">
                    </div>
                    <label class="col-sm-2 form-label pt-1 text-left">Email* :</label>
                    <div class="col-sm-3 mb-3 mr-5">
                        <input autocomplete="off"  type="text" name="email" id="email" class="form-control" value="{{$agents[0]->email}}" required>
                    </div>
                    
                </div>
                <div class="form-group row my-0">
                    <label class="col-sm-2 form-label pt-1 text-left">Password* :</label>
                    <div class="col-sm-3 mb-3 mr-5">
                        <input autocomplete="off" required type="password" name="pw" id="pw" class="form-control" value="{{$user[0]->pw ?? null}}">
                        <input type="checkbox" class="form-control" onClick="myFunction();">Show Password
                    </div>
                    <div class="mx-3">  
                    </div>
                    <label class="col-sm-2 form-label pt-1 text-left">Website :</label>
                    <div class="col-sm-3 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="website" id="website" class="form-control" value="{{$agents[0]->website}}" >
                    </div>
                </div>

                <div class="form-group row my-0">
                    <label class="col-sm-2 form-label pt-1 text-left">Country :</label>
                        <div class="col-sm-3 mb-3 mr-5">
                           <input type="text"  autocomplete="off" name="c" id="c" class="form-control" list="clist" placeholder="Select Country" value="{{$country_name[0]->name ?? null}}">
                            <datalist  id="clist">
                            <option data-value="" selected disabled="">Select Country</option>
                            @foreach ($countries as $key => $value)
                            <option data-value="{{$value->id}}" value="{{$value->name}}"></option>
                            @endforeach 
                      </datalist> 
                     <input type="hidden" name="countries" id="countries" value="{{$agents[0]->country_name}}">
                        </div>
                    <div class="mx-3">  
                    </div>
                    <label class="col-sm-2 form-label pt-1 text-left">City :</label>
                        <div class="col-sm-3 mb-3 mr-5">
                            <input type="text"  autocomplete="off" name="ct" id="ct" class="form-control" list="ctlist" placeholder="Select City" value="{{$city_name[0]->name ?? null}}">
                            <datalist  id="ctlist">
                            <option data-value="" selected disabled="">Select City</option>
                            @foreach ($cities as $key => $values)
                            <option data-value="{{$values->id}}" value="{{$values->name}}"></option>
                            @endforeach         
                             </datalist>
                            <input type="hidden" name="cities" id="cities" value="{{$agents[0]->city_name}}">
                        </div>
                </div>
                <div class="form-group row my-0">
                    <label class="col-sm-2 form-label pt-1 text-left">Address :</label>
                    <div class="col-sm-3 mb-3 mr-5">
                        <textarea rows="3" autocomplete="off" name="address1" id="address1" class="form-control" >{{$agents[0]->address}}</textarea> 
                    </div>
                    <div class="mx-3">  
                    </div>
                    <label class="col-sm-2 form-label pt-1 text-left">Postcode :</label>
                    <div class="col-sm-3 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="postcode" id="postcode" class="form-control" value="{{$agents[0]->postcode}}" >
                    </div>
                </div>
            </div>
            <hr>
            <div class="col-2 ml-8 pl-8" style="padding-top : 10px;">
                <div class="form-group row my-0 pt-5">
                    <label class="col-sm-2 form-label pt-1 text-left">Credit Limit (RM) :</label>
                    <div class="col-sm-3 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="credit_limit" id="credit_limit" class="form-control" value="{{$agents[0]->credit_limit}}">
                    </div>
                    <div class="mx-3">  
                    </div>
                    <label class="col-sm-2 form-label pt-1 text-left">Commission :</label>
                    <div class="col-sm-3 mb-3 mr-5">
                        <select  id="group" class="form-control" name="commissions">
                            <option value="" selected disabled="">Select Commissions</option>
                            @foreach ($commissions as $com => $values)
                                @if($values->id == $agents[0]->commission_id)
                                    <option value="{{$values->id}}" selected>{{$values->name}}</option>
                                @else
                                    <option value="{{$values->id}}" >{{$values->name}}</option>
                                @endif
                            @endforeach     
                        </select> 
                    </div>
                </div>
                <div class="form-group row my-0">
                    <label class="col-sm-2 form-label pt-1 text-left">Remarks :</label>
                    <div class="col-sm-3 mb-3 mr-5">
                        <textarea rows="3" autocomplete="off" type="text" name="remarks" id="remarks" class="form-control"> {{$agents[0]->remark}}</textarea> 
                    </div>
                    <div class="mx-3">  
                    </div>
                </div>
            </div>
        </div>
        <div id="agent_contact" class="card mt-1 mx-2 d-none" style="padding-left :30px;">
            <div class="col-2 ml-8 pl-8">
                <h3><u>Contact Person 1</u></h3 style="">
                <div class="form-group row my-0 pt-5">
                    <label class="col-sm-2  pt-1 text-left">Salutation :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="salutation_1" id="salutation_1" class="form-control" value="{{$agents[0]->salutation1}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                    <label class="col-sm-2 form-label pt-1 text-left">Mobile :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="mobile1_1" id="mobile1_1" class="form-control" value="{{$agents[0]->mobile1}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                </div>
                <div class="form-group row my-0 ">
                    <label class="col-sm-2  pt-1 text-left">Name :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="firstname_1" id="firstname_1" class="form-control" value="{{$agents[0]->first_name1}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                    <label class="col-sm-2 form-label pt-1 text-left">Tel :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="telno1_1" id="telno1_1" class="form-control" value="{{$agents[0]->tel1}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                </div>
                <div class="form-group row my-0 ">
                    <!-- <label class="col-sm-2  pt-1 text-left">Last Name :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="lastname_1" id="lastname_1" class="form-control" value="{{$agents[0]->last_name1}}" >
                    </div> -->
                    <div class="mx-3">  
                    </div>
                    <label class="col-sm-2 form-label pt-1 text-left">Fax :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="fax1_1" id="fax1_1" class="form-control" value="{{$agents[0]->fax1}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                </div>
                <div class="form-group row my-0 ">
                    <label class="col-sm-2  pt-1 text-left">Designation :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="designation_1" id="designation_1" class="form-control" value="{{$agents[0]->designation1}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                    <label class="col-sm-2 form-label pt-1 text-left">Email :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="email1_1" id="email1_1" class="form-control" value="{{$agents[0]->email1}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                </div>
            </div>
            <hr>
            <div class="col-2 ml-8 pl-8">
                <h3><u>Contact Person 2</u></h3 style="">
                <div class="form-group row my-0 pt-5">
                    <label class="col-sm-2  pt-1 text-left">Salutation :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="salutation_2" id="salutation_2" class="form-control" value="{{$agents[0]->salutation2}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                    <label class="col-sm-2 form-label pt-1 text-left">Mobile :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="mobile1_2" id="mobile1_2" class="form-control" value="{{$agents[0]->mobile2}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                </div>
                <div class="form-group row my-0 ">
                    <label class="col-sm-2  pt-1 text-left">Name :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="firstname_2" id="firstname_2" class="form-control" value="{{$agents[0]->first_name2}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                    <label class="col-sm-2 form-label pt-1 text-left">Tel :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="telno1_2" id="telno1_2" class="form-control" value="{{$agents[0]->tel2}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                </div>
                <div class="form-group row my-0 ">
                    <!-- <label class="col-sm-1  pt-1 text-left">Last Name :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="lastname_2" id="lastname_2" class="form-control" value="{{$agents[0]->last_name2}}" >
                    </div> -->
                    <div class="mx-3">  
                    </div>
                    <label class="col-sm-2 form-label pt-1 text-left">Fax :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="fax1_2" id="fax1_2" class="form-control" value="{{$agents[0]->fax2}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                </div>
                <div class="form-group row my-0 ">
                    <label class="col-sm-2  pt-1 text-left">Designation :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="designation_2" id="designation_2" class="form-control" value="{{$agents[0]->designation2}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                    <label class="col-sm-2 form-label pt-1 text-left">Email :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="email1_2" id="email1_2" class="form-control" value="{{$agents[0]->email2}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                </div>
            </div>
            <div class="col-2 ml-8 pl-8">
                <h3><u>Contact Person 3</u></h3 style="">
                <div class="form-group row my-0 pt-5">
                    <label class="col-sm-2  pt-1 text-left">Salutation :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="salutation_3" id="salutation_3" class="form-control" value="{{$agents[0]->salutation3}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                    <label class="col-sm-2 form-label pt-1 text-left">Mobile :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="mobile1_3" id="mobile1_3" class="form-control" value="{{$agents[0]->mobile3}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                    
                </div>
                <div class="form-group row my-0 ">
                    <label class="col-sm-2  pt-1 text-left">Name :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="firstname_3" id="firstname_3" class="form-control" value="{{$agents[0]->first_name3}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                    <label class="col-sm-2 form-label pt-1 text-left">Tel :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="telno1_3" id="telno1_3" class="form-control" value="{{$agents[0]->tel3}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                </div>
                <div class="form-group row my-0 ">
                    <!-- <label class="col-sm-1  pt-1 text-left">Last Name :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="lastname_3" id="lastname_3" class="form-control" value="{{$agents[0]->last_name3}}" >
                    </div> -->
                    <div class="mx-3">  
                    </div>
                    <label class="col-sm-2 form-label pt-1 text-left">Fax :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="fax1_3" id="fax1_3" class="form-control" value="{{$agents[0]->fax3}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                </div>
                <div class="form-group row my-0 ">
                    <label class="col-sm-2  pt-1 text-left">Designation :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="designation_3" id="designation_3" class="form-control" value="{{$agents[0]->designation3}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                    <label class="col-sm-2 form-label pt-1 text-left">Email :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="email1_3" id="email1_3" class="form-control" value="{{$agents[0]->email3}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                </div>
            </div>
            <div class="col-2 ml-8 pl-8">
                <h3><u>Contact Person 4</u></h3 style="">
                <div class="form-group row my-0 pt-5">
                    <label class="col-sm-2  pt-1 text-left">Salutation :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="salutation_4" id="salutation_4" class="form-control" value="{{$agents[0]->salutation4}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                    <label class="col-sm-2 form-label pt-1 text-left">Mobile :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="mobile1_4" id="mobile1_4" class="form-control" value="{{$agents[0]->mobile4}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                </div>
                <div class="form-group row my-0 ">
                    <label class="col-sm-2  pt-1 text-left">Name :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="firstname_4" id="firstname_4" class="form-control" value="{{$agents[0]->first_name4}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                    <label class="col-sm-2 form-label pt-1 text-left">Tel :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="telno1_4" id="telno1_4" class="form-control" value="{{$agents[0]->tel4}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                </div>
                <div class="form-group row my-0 ">
                    <!-- <label class="col-sm-2  pt-1 text-left">Last Name :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="lastname_4" id="lastname_4" class="form-control" value="{{$agents[0]->last_name4}}" >
                    </div> -->
                    <div class="mx-3">  
                    </div>
                    <label class="col-sm-2 form-label pt-1 text-left">Fax :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="fax1_4" id="fax1_4" class="form-control" value="{{$agents[0]->fax4}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                </div>
                <div class="form-group row my-0 ">
                    <label class="col-sm-2  pt-1 text-left">Designation :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="designation_4" id="designation_4" class="form-control" value="{{$agents[0]->designation4}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                    <label class="col-sm-2 form-label pt-1 text-left">Email :</label>
                    <div class="col-sm-2 mb-3 mr-5">
                        <input autocomplete="off" type="text" name="email1_4" id="email1_4" class="form-control" value="{{$agents[0]->email4}}" >
                    </div>
                    <div class="mx-3">  
                    </div>
                </div>
            </div>
        </div> 
    </form>
</div>
    
@endsection
@section('footer_script')
    <script src="{{asset('assets/scripts/datatable.js' )}}" type="text/javascript"></script>
    <script src="{{asset('assets/plugins/datatables/datatables.min.js' )}}" type="text/javascript"></script>
    <script src="{{asset('assets/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js' )}}"
            type="text/javascript"></script>
    <script src="{{asset('assets/plugins/jquery-validation/js/jquery.validate.min.js') }}"
            type="text/javascript"></script>
    <script src="{{asset('assets/plugins/jquery-validation/js/additional-methods.min.js') }}"
            type="text/javascript"></script>
    <script src="{{asset('assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js' )}}"
            type="text/javascript"></script>
    <script src="{{asset('assets/scripts/pages/booking/new.js') }}" type="text/javascript"></script> 

    <script type="text/javascript">
        function ChangeForm(a,b,c){

            document.getElementById("detail_link").classList.remove('active');
            document.getElementById("contact_link").classList.remove('active');
            document.getElementById(c).classList.add('active');


            document.getElementById("agent_contact").classList.add('d-none');
            document.getElementById("agent_detail").classList.add('d-none');
            document.getElementById(a).classList.remove('d-none');
        }
        function myFunction() {
          var x = document.getElementById("pw");
          if (x.type === "password") {
            x.type = "text";
          } else {
            x.type = "password";
          }
        }
    </script>
<script> 
$(document).ready(function()
        {
            
            $('#ct').change(function()
            {
                var value = $('#ct').val();
                var show = $('#ctlist [value="' + value + '"]').data('value');
                $("#cities").val(show);
            });
        });
        </script>
        <script> 
$(document).ready(function()
        {
            
            $('#c').change(function()
            {
                var value = $('#c').val();
                var show = $('#clist [value="' + value + '"]').data('value');
                $("#countries").val(show);
            });
        });
        </script>
@endsection