@extends('layouts.main') 

@section('content')
    <!-- push external head elements to head -->
    @push('head')
        <title>Page title | Site title</title>
        <!-- add some inline style or css file if any -->
        <link rel="stylesheet" href="{{ asset('file-path')}}">
        <style type="text/css">
        </style>
    @endpush
    <script>
        let locations= {!! json_encode($locations->toArray(), JSON_HEX_TAG) !!};
    </script>
    <div class="container-fluid">
    	<!-- page contents here -->
      @if($errors->any())  
      <div class="row alert alert-danger">
          <ul>
              @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
              @endforeach
          </ul>
      </div>
      @endif
        @if (session('status'))
            <div class="alert alert-success">
                {{ session('status') }}
            </div>
        @endif
        @if (session('error_m'))
            <div class="alert alert-danger">
                {{ session('error_m') }}
            </div>
        @endif
        <div class="page-header">
          <div class="row align-items-end">
              <div class="col-lg-8">
                  <div class="page-header-title mb-3">
                      <i class="ik ik-truck bg-success"></i>
                      <div class="d-inline">
                          <h5>Agencies</h5>
                          @can('manage_user')
                          <span>Add a agency and its corresponding city</span>
                          @endcan
                      </div>
                  </div>
                  <div class="row mb-1">
                    <div class="">
                        @can('manage_user')
                        <button class="btn btn-primary mx-2" data-toggle="modal" data-target="#addagency">+ Add an Agency</button>
                        <button class="btn btn-success" data-toggle="modal" data-target="#createbranch">+ Create Agency Branch</button>
                        @endcan
                    </div>
                </div>
              </div>
              <div class="col-lg-4">
                  <nav class="breadcrumb-container" aria-label="breadcrumb">
                      <ol class="breadcrumb">
                          <li class="breadcrumb-item">
                              <a href="{{route('dashboard')}}"><i class="ik ik-home"></i></a>
                          </li>
                          <li class="breadcrumb-item">
                              @can('manage_user')
                              <a href="#">Agency Management</a>
                              @endcan
                              @can('kiosk_management')
                              <a href="#">Agencies</a>
                              @endcan
                          </li>
                          <li class="breadcrumb-item active" aria-current="page">Agencies</li>
                      </ol>
                  </nav>
              </div>
          </div>
      </div>
      <div class="card">
        <div class="card-header d-block">
            <h3>All Agencies</h3>
            <span>All information about various <code>Agencies  @can('kiosk_management') under you @endcan</code></span>
        </div>
        <div class="card-body px-5 table-responsive">
                <table class="table" id="data_table">
                  <thead>
                    <tr>
                      <th scope="col" class="text-center">#</th>
                      <th scope="col" class="text-center">Agency</th>
                      <th scope="col" class="text-center">Logo</th>
                      <th scope="col" class="text-center">Description</th>
                      <th scope="col" class="text-center">Location Name</th>
                      <th scope="col" class="text-center">Tel</th>
                      <th scope="col" class="text-center">Agency Email</th>
                      <th scope="col" class="text-center">Website</th>
                      {{-- <th scope="col" class="text-center">City HQ</th> --}}
                      <th scope="col" class="text-center">Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                      @if(sizeof($agencies)>0)
                      @php
                          $counter=1;
                      @endphp
                      @foreach($agencies as $agency)
                      {{-- @can('kiosk_management') --}}
                          @foreach($kiosks as $kiosk)
                          @foreach($agency_locations as $agency_location)
                              @if($kiosk->assigned_to == auth()->user()->id && $agency_location->al_id==$kiosk->agency_location_id && $agency_location->agency_id==$agency->agency_id)
                      {{-- @endcan     --}}
                      <tr>
                        <th scope="row">{{$counter}}</th>
                        <td>{{$agency->agency_name}}</td>
                        <td><img src="storage/$agency->logo" onerror="this.src='../img/users/nophoto.jpg'" class="table-user-thumb" alt=""></td>
                        <td>{{$agency->description}}</td>
                        <td>{{$agency_location->location_name}}</td>
                        <td>
                            <div class="table-actions">
                                <ul>
                                    <li>{{$agency->phone1}}</li>
                                    <li>{{$agency->phone2}}</li>
                                    <li>{{$agency->phone3}}</li>
                                </ul>
                            </div>
                        </td>
                        <td>{{$agency->email}}</td>
                        <td><a href="http://{{$agency->website}}" target="_blank" rel="noopener noreferrer">{{$agency->website}}</a></td>
                        {{-- <td>{{$agency->name}}</td> --}}
                        <td>
                            <div class="table-actions d-flex">
                                @can('manage_user')
                                <a href="#" data-toggle="modal" data-target="#seecities_{{$agency->agency_id}}" title="see agency locations"><i class="ik ik-eye"></i></a>
                                <a href="#" data-toggle="modal" data-target="#setlocations_{{$agency->id}}" title="Set Agency Locations"><i class="ik ik-edit-2"></i></a>
                                <a href="#" data-toggle="modal" data-target="#deleteagency_{{$agency->id}}"><i class="ik ik-trash-2"></i></a>
                                @endcan
                            </div>
                                <!-- Modal Display agency cities-->
                                <div class="modal fade" id="seecities_{{$agency->agency_id}}" tabindex="-1" aria-labelledby="addcityLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-scrollable">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Locations for {{$agency->agency_name}} </h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                        </div>
                                        <div class="modal-body">
                                            <ul>
                                                @if(sizeof($agency_locations)>0)     
                                                    @foreach($agency_locations as $agency_location)
                                                        @foreach($agency_cities as $city)    
                                                            @if($city->agency_id==$agency->agency_id && $city->ac_id==$agency_location->agency_city_id)
                                                                <li>{{$agency_location->location_name}}({{$city->name}})</li> 
                                                            @endif
                                                        @endforeach
                                                    @endforeach
                                                {{-- @else
                                                @foreach($agency_cities as $city_agency)
                                                    @if($city_agency->agency_id==$agency->agency_id)
                                                        <li>{{$city_agency->name}} </li> 
                                                    @endif
                                                @endforeach --}}
                                                @endif
                                            </ul>
                                            
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                            {{-- <button type="submit" class="btn btn-primary">Assign Agency to City</button> --}}
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                <!-- Modal edit agency-->
                                <div class="modal fade" id="setlocations_{{$agency->id}}" tabindex="-1" aria-labelledby="addcityLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-scrollable modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Edit agency: {{$agency->agency_name}} </h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                        </div>
                                        <form action="{{url('edit_agency')}}" method="post" enctype="multipart/form-data">
                                            @csrf
                                            <input type="hidden" name="agency_id" value="{{$agency->agency_id}}" required>
                                            <div class="modal-body">
                                                <div class="form-group">
                                                    <label for="">Agency Name</label> 
                                                    <input type="text" name="agency_name" id="" class="form-control" value="{{$agency->agency_name}}" required>   
                                                </div>
                                                <div class="form-group row">
                                                    <div class="col-md-6">
                                                        <label for="">City HQ</label>
                                                        <select name="city_hq" id="" class="form-control" required>
                                                            @foreach($cities as $city)
                                                            <option value="{{$city->id}}"
                                                                @if($city->id==$agency->id)
                                                                    selected
                                                                @endif
                                                                     >{{$city->name}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label for="">Address HQ</label>
                                                        <input type="text" name="address_hq" id="" class="form-control" value="{{$agency->address_hq}}" required>
                                                    </div>
                                                </div> 
                                                <div class="form-group row">
                                                    <div class="col-md-4">
                                                        <label for="">Tel1</label>
                                                        <input type="tel" name="tel1" id="" class="form-control" value="{{$agency->phone1}}" required>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label for="">Tel2</label>
                                                        <input type="tel" name="tel2" id="" class="form-control" value="{{$agency->phone2}}" required>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label for="">Tel3</label>
                                                        <input type="tel" name="tel3" id="" class="form-control" value="{{$agency->phone3}}">
                                                    </div>
                                                    
                                                </div>
                                                <div class="form-group row">
                                                    <div class="col-md-4">
                                                        <label for="">Agency Email</label>
                                                        <input type="email" name="agency_email" id="" class="form-control" value="{{$agency->email}}">
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label for="">Agency Website</label>
                                                        <input type="text" name="agency_website" id="" class="form-control" value="{{$agency->website}}">
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label for="">Agency Logo</label>
                                                        <input type="file" name="logo" id="" class="form-control" value="{{$agency->logo}}">
                                                    </div>
                                                    
                                                </div>
                                                <div class="form-group">
                                                    <label for="">Description</label>
                                                    <textarea name="agency_description" id="" cols="30" rows="3" value="{{$agency->description}}" class="form-control"></textarea>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                <button type="submit" class="btn btn-primary">Save Changes</button>
                                            </div>
                                        </form>
                                    </div>
                                    </div>
                                </div>
                                {{-- delete agency modal --}}
                                <div class="modal fade" id="deleteagency_{{$agency->id}}" tabindex="-1" role="dialog" aria-labelledby="demoModalLabel" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="demoModalLabel">Do you really wish to delete this agency?</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            </div>
                                            <div class="modal-body">
                                                <ul>
                                                    <li>Agency: {{$agency->agency_name}}</li>
                                                </ul>
                                                <form action="{{route('delete_agency')}}" method="post">
                                                    <input type="hidden" name="agency_id" value="{{$agency->agency_id}}" required>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('Close')}}</button>
                                                <button type="submit" class="btn btn-danger">Delete Agency</button>
                                            </div>
                                        </form>
                                        </div>
                                    </div>
                                </div>
                        </td>
                        {{-- @can('kiosk_management') --}}
                        @endif
                        @endforeach
                    @endforeach
                        {{-- @endcan --}}
                      </tr>
                      @php
                      $counter++;
                      @endphp
                      @endforeach
                      @endif
                  </tbody>
                </table>
        </div>
    </div>
       
       
    </div>
    {{-- modals --}}
  

     <!-- Modal add agency -->
  <div class="modal fade" id="addagency" tabindex="-1" aria-labelledby="addagencyLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Add an Agency</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <form action="{{route('add_agency')}}" method="post" enctype="multipart/form-data">
                @csrf
                 <div class="form-group">
                    <label for="exampleFormControlFile1">Agency Name <code>*</code></label>
                    <input type="text" class="form-control" name="agency_name" required>
                </div>
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="inputEmail4">City HQ <code>*</code></label>
                        <select name="city_hq" class="form-control" required>
                            @foreach($cities as $city)
                            <option value="{{$city->id}}">{{$city->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="exampleFormControlFile1">Address HQ<code>*</code></label>
                        <input type="text" class="form-control" name="address_hq" required>
                    </div>
                </div>
                <div class="form-group row my-2">
                    <div class="col-md-4">
                        <label for="exampleFormControlFile1">Tel 1<code>*</code></label>
                        <input type="tel" class="form-control" name="agency_tel1" required>
                    </div>
                    <div class="col-md-4">
                        <label for="exampleFormControlFile1">Tel 2<code>*</code></label>
                        <input type="tel" class="form-control" name="agency_tel2" required>
                    </div>
                    <div class="col-md-4">
                        <label for="exampleFormControlFile1">Tel 3</label>
                        <input type="tel" class="form-control" name="agency_tel3">
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-4">
                        <label for="exampleFormControlFile1">Agency email</label>
                        <input type="email" class="form-control" name="agency_email">
                    </div>
                    <div class="col-md-4">
                        <label for="exampleFormControlFile1">Agency Website</label>
                        <input type="text" class="form-control" name="agency_website">
                    </div>
                    <div class="col-md-4">
                        <label for="exampleFormControlFile1">Agency Logo</label>
                        <input type="file" class="form-control" name="agency_logo">
                    </div>
                </div>
                <div class="form-group">
                    <label for="exampleFormControlFile1">Description</label>
                    <textarea class="form-control form-control-lg" name="agency_description" id="exampleFormControlTextarea1" rows="3" placeholder="description here..."></textarea>
                </div>
               
            
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary">Save agency</button>
            </div>
        </form>
      </div>
    </div>
  </div>
  <!-- Modal set agency locations-->
  <div class="modal fade" id="createbranch" tabindex="-1" aria-labelledby="addcityLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-lg">
    <div class="modal-content">
        <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Create Branch for an Agency </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
           <form action="{{route('assign_agency_locations')}}" method="post">
               @csrf
               <div class="form-group row">
                   <div class="col-md-4">
                       <label for="">Agency <code>*</code></label>
                       <select name="agency_id" id="agency" class="form-control" required>
                           @foreach($agencies as $agency)
                               <option value="{{$agency->agency_id}}">{{$agency->agency_name}}</option>
                           @endforeach
                       </select>
                   </div>
                   <div class="col-md-4">
                    <label for="">City <code>*</code></label>
                    <select name="city_id" id="city" class="form-control">
                        @foreach($cities as $city)
                            <option value="{{$city->id}}" required>{{$city->name}}</option>
                        @endforeach
                    </select>
                   </div>
                  <div class="col-md-4">
                    <label for="">Location <code>*</code></label>
                    <select name="location_id" id="locations" class="form-control" required>
                        {{-- @foreach($locations as $location)
                            <option value="{{$location->location_id}}" required>{{$location->location_name}}</option>
                        @endforeach --}}
                    </select>
                   </div>
               </div>
               <div class="form-group row">
                   <div class="col-md-4">
                       <label for="">Tel 1 <code>*</code></label>
                       <input type="tel" name="tel1" id="" class="form-control" required>
                   </div>
                   <div class="col-md-4">
                       <label for="">Tel 2</label>
                       <input type="tel" name="tel2" id="" class="form-control">
                   </div>
                   <div class="col-md-4">
                       <label for="">Address</label>
                       <input type="text" name="address" id="" class="form-control">
                   </div>
               </div>
               <div class="form-group">
                   <label for="">Description</label>
                   <textarea name="location_description" id="" cols="30" rows="5" class="form-control" placeholder="Description here"></textarea>
               </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary">Create Branch</button>
            </div>
        </form>
    </div>
    </div>
</div>
    {{-- end modals --}}
    <!-- push external js if any -->
    @push('script') 
        <script src="{{ asset('script-path') }}"></script>
        <script src="{{ asset('plugins/DataTables/datatables.min.js') }}"></script>
        <script src="{{ asset('js/datatables.js') }}"></script>
        <script>
            const agency=document.getElementById('agency');
            const city=document.getElementById('city');
            city.addEventListener('change',($event)=>{
                document.getElementById('locations').innerHTML='';
                    locations.forEach(item =>{
                        if (item.city_id==$event.target.value) {
                        const option = document.createElement("OPTION");
                        const name = document.createTextNode(item.location_name);
                        option.value = item.location_id;
                        option.appendChild(name);
                        document.getElementById('locations').appendChild(option);

                    }
                    });
                })
               
        </script>
    @endpush
@endsection'