@extends('layouts.sidebar')
@section('title', 'Nomadic-Location')
@section('content')

<div class="pagetitle">
  <h1>Location Page</h1>
</div>

<section class="section profile position-relative">
  <div class="col-xl-12">
    <ul class="nav nav-tabs nav-tabs-bordered position-relative" id="borderedTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="General-tab" data-bs-toggle="tab" data-bs-target="#bordered-General" type="button" role="tab" aria-controls="General" aria-selected="true">General</button>
      </li>
      <li class="nav-item " role="presentation">
        <button class="nav-link" id="Payment-tab" data-bs-toggle="tab" data-bs-target="#bordered-Payment" type="button" role="tab" aria-controls="Payment" aria-selected="false">Payment</button>
      </li>
      <li class="nav-item " role="presentation">
        <button class="nav-link" id="Approval-tab" data-bs-toggle="tab" data-bs-target="#bordered-Approval" type="button" role="tab" aria-controls="Approval" aria-selected="false">Approval</button>
      </li>
    </ul>
    <div class="tab-content pt-2" id="borderedTabContent">
      <div class="tab-pane fade show active" id="bordered-General" role="tabpanel" aria-labelledby="General-tab">
        <form id="updateLocation">
          @csrf
          <input type="hidden" id="locationid" name="locationid" value="@if($data){{$data->id}}@endif" readonly>
          <div class="row mt-4">
            <div class="col-xl-4">
              <div class="card">
                <div class="card-body profile-card pl-0 d-flex flex-column">
                    <label class="lblprofile">Location</label>
                </div>
              </div>
            </div>
            <div class="col-xl-8">
              <div class="card">
                <div class="card-body">
                  <div class="row">
                    <div class="col-md-7 mb-2 position-relative">
                      <input type="text" class="form-control" name="location" placeholder="Location name" value="@if($data){{$data->location}}@endif">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-xl-4">
              <div class="card">
                <div class="card-body profile-card pl-0 d-flex flex-column">
                    <label class="lblprofile">Type</label>
                </div>
              </div>
            </div>
            <div class="col-xl-8">
              <div class="card">
                <div class="card-body">
                  <div class="row">
                    <div class="col-md-7 mb-2 position-relative">
                      <select class="form-control" name="type">  
                          <option value="">Select Type</option>
                          <option value="Hub" @if($data && $data->type=='Hub') selected @endif>Hub</option>
                          <option value="Satellite" @if($data && $data->type=='Satellite') selected @endif>Satellite</option>
                        </select>
                        <i class="bi bi-caret-down-fill searchicon"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-xl-4">
              <div class="card">
                <div class="card-body profile-card pt-4 pl-0 d-flex flex-column">
                    <label class="lblprofile"></label>
                </div>
              </div>
            </div>
            <div class="col-xl-8 mt-4">
              <div class="card">
                <div class="card-body pt-3">
                  <div class="row">
                    <div class="col-md-7 mb-2 position-relative">
                        <input id="checkbox-21" name="coming_soon" class="checkbox-custom" value="1" type="checkbox" @if($data &&  $data->coming_soon==1) checked @endif/>
                        <label for="checkbox-21" class="checkbox-custom-label">Coming soon</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row mt-3">
            <div class="col-md-12 text-center">
              <input id="btn_saveLocation" type="button" class="btn btn-primary me-2" value="Save changes">
              @if($data)
              <input id="btn_delete" type="button" class="btn btn-danger" data-type="location" data-did="{{$data->id}}" value="Delete Location">
              @endif
            </div>
          </div>

        </form>
      </div>

      <div class="tab-pane fade" id="bordered-Payment" role="tabpanel" aria-labelledby="Payment-tab">
        <form id="addLocationManager">
          @csrf
          <input type="hidden" name="locationid" value="@if($data){{$data->id}}@endif">
          <div class="row mt-4">
            <div class="col-xl-4">
              <div class="card">
                <div class="card-body profile-card pl-0 d-flex flex-column">
                  <label class="lblprofile">Add Location Manager</label>
                </div>
              </div>
            </div>
            <div class="col-xl-8">
              <div class="card">
                <div class="card-body">
                  <div class="row">
                    <div class="col-md-7 mb-2 position-relative">
                      <label for="manager_search">Search User to Add as Location Manager</label>
                      <input type="text" id="manager_search" class="form-control" placeholder="Type name or email...">
                      <div id="manager_results" class="list-group mt-2"></div>
                    </div>
                    <div class="col-md-5">
                      <button type="submit" class="btn btn-primary mt-4">Add Manager</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>
        <div class="row mt-4">
          <div class="col-xl-4">
            <div class="card">
              <div class="card-body profile-card pl-0 d-flex flex-column">
                <label class="lblprofile">Current Managers</label>
              </div>
            </div>
          </div>
          <div class="col-xl-8">
            <div class="card">
              <div class="card-body">
                <h5>Current Location Managers</h5>
                <ul id="current_managers" class="list-group">
                  @if(isset($managers) && count($managers) > 0)
                    @foreach($managers as $manager)
                      <li class="list-group-item d-flex justify-content-between align-items-center">
                        {{$manager->fname}} {{$manager->lname}} ({{$manager->email}})
                        <button type="button" class="btn btn-danger btn-sm remove-manager" data-id="{{$manager->id}}">Remove</button>
                      </li>
                    @endforeach
                  @else
                    <li class="list-group-item">No managers assigned.</li>
                  @endif
                </ul>
              </div>
            </div>
          </div>
        </div>

        <div class="row mt-4">
          <div class="col-xl-4">
            <div class="card">
              <div class="card-body profile-card pl-0 d-flex flex-column">
                <label class="lblprofile">Set Location Percentages</label>
              </div>
            </div>
          </div>
          <div class="col-xl-8">
            <div class="card">
              <div class="card-body">
                <div class="row mt-4">
                  <div class="col-md-3 mb-2">
                    <label for="payout_people">People (%)</label>
                    <input type="number" min="0" max="100" step="1" class="form-control" name="payout_people" id="payout_people" value="@if(isset($data) && isset($data->split_perc_people)){{$data->split_perc_people}}@endif" placeholder="People %" required>
                  </div>
                  <div class="col-md-3 mb-2">
                    <label for="payout_studio">Studio (%)</label>
                    <input type="number" min="0" max="100" step="1" class="form-control" name="payout_studio" id="payout_studio" value="@if(isset($data) && isset($data->split_perc_studio)){{$data->split_perc_studio}}@endif" placeholder="Studio %" required>
                  </div>
                  <div class="col-md-3 mb-2">
                    <label for="payout_events">Events (%)</label>
                    <input type="number" min="0" max="100" step="1" class="form-control" name="payout_events" id="payout_events" value="@if(isset($data) && isset($data->split_perc_event)){{$data->split_perc_event}}@endif" placeholder="Events %" required>
                  </div>
                  <div class="col-md-3 mb-2">
                    <label for="payout_rentals">Rentals (%)</label>
                    <input type="number" min="0" max="100" step="1" class="form-control" name="payout_rentals" id="payout_rentals" value="@if(isset($data) && isset($data->split_perc_rental)){{$data->split_perc_rental}}@endif" placeholder="Rentals %" required>
                  </div>
                  <div class="col-md-6 mb-2">
                    <label></label>
                    <button id="btn_savesplitperc" type="submit" class="btn btn-primary mt-4">Save Percentages</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

      <div class="tab-pane fade" id="bordered-Approval" role="tabpanel" aria-labelledby="Approval-tab">
        <div class="row">
          <div class="gridcard col-xl-12">

            <div class="card">
              <div class="row">
                <div class="col-md-7 mb-2 position-relative">
                  <input id="search_field" type="text" class="form-control" placeholder="Search">
                  <i class="bi bi-search searchicon"></i>
                </div>
              </div>
              <div class="card-body profile-card pt-4 pl-0 d-flex flex-column align-items-center">
                <table class="table tbl">
                  <thead>
                    <tr>
                      <td>Name</td>
                      <td>Role</td>
                      <td>Status</td>
                      <td></td>
                    </tr>
                  </thead>
                  <tbody>
                    @if(!empty($approval) && $approval->count())
                      @foreach($approval as $dt)
                      <tr>
                        <td data-label="Name">{{$dt->fname}} {{$dt->lname}}</td>
                        <td data-label="Role">{{ucfirst($dt->role)}}</td>
                        <td class="{{$dt->uuid}}" data-label="Status">
                          @if($dt->status==0) <span>Sent</span> 
                          @elseif($dt->status==1) <span class="txtPayment">Payment Captured</span> 
                          @elseif($dt->status==2) <span class="txtApproved">Approved</span> 
                          @elseif($dt->status==3) <span class="txtDenied">Denied</span> @endif
                        </td>
                        <td data-label="">
                        @if($dt->status==0 || $dt->status==1)
                          <i class="bi bi-eye vieweye" data-uuid="{{$dt->uuid}}"></i>
                          @else
                          <i class="bi bi-eye vieweye" data-uuid="{{$dt->uuid}}"></i>
                          @endif
                        </td>
                      </tr>
                      @endforeach
                    @else
                    <tr>
                      <td colspan="5">No record found</td>
                    </tr>  
                    @endif
                  </tbody>
                  <tfoot>
                    <tr>
                      <td colspan="5">
                        <div class="foot-paging">
                          {!! $approval->withQueryString()->links('vendor.pagination.bootstrap-5') !!}
                        </div>  
                      </td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </div>

          </div>

          <div class="col-xl-5 user-card" style="display:none;">
            <div class="card thinborder bgcolor" style="min-height:500px;">
              <div class="card-body pt-3">
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</section>
@endsection
@section('footer_scripts')
<script>
$(document).ready(function () {
  $(document).on('click', '#btn_saveLocation', function(){
    let obj = $(this);
    obj.attr('disabled',true);
    $.ajax({
        type: 'POST',
        dataType: 'json',
        data: $('#updateLocation').serialize(),
        url: APP_URL+"/save-location",
        success: function(res) {
          obj.attr('disabled',false);
          if(res.status){
            $('#alertMsg .pagemsgcontent').html('<div class="alert alert-success">'+res.message+'</div>');
            $('#alertMsg').modal('show');
          }
          window.location.href = APP_URL+'/location-detail/'+res._id;
        },
        error: function(res) {
          obj.attr('disabled',false);  
          ajax_error(res);
        }
    });
  });

  $('#manager_search').on('input', function() {
    let query = $(this).val();
    if(query.length < 2) {
      $('#manager_results').empty();
      return;
    }
    $.ajax({
      url: APP_URL + '/search-user',
      type: 'GET',
      data: { q: query },
      success: function(res) {
        let results = res.data || [];
        let html = '';
        results.forEach(function(user) {
          html += `<button type="button" class="list-group-item list-group-item-action select-manager" data-id="${user.id}" data-name="${user.fname} ${user.lname}" data-email="${user.email}">${user.fname} ${user.lname} (${user.email})</button>`;
        });
        $('#manager_results').html(html);
      }
    });
  });

  $(document).on('click', '.select-manager', function() {
    let userId = $(this).data('id');
    let userName = $(this).data('name');
    let userEmail = $(this).data('email');
    $('#manager_results').empty();
    $('#manager_search').val(userName + ' (' + userEmail + ')');
    $('#addLocationManager').append(`<input type="hidden" name="manager_id" value="${userId}">`);
  });

  $('#addLocationManager').on('submit', function(e) {
    e.preventDefault();
    let obj = $(this);
    obj.attr('disabled',true);
    $.ajax({
      url: APP_URL + '/add-location-manager',
      type: 'POST',
      data: $(this).serialize(),
      success: function(res) {
        obj.attr('disabled',false);
        if(res.status && res.manager) {
          // Add new manager to the list without reload
          let html = `<li class="list-group-item d-flex justify-content-between align-items-center">
            ${res.manager.fname} ${res.manager.lname} (${res.manager.email})
            <button type="button" class="btn btn-danger btn-sm remove-manager" data-id="${res.manager.id}">Remove</button>
          </li>`;
          if($('#current_managers .list-group-item').length === 1 && $('#current_managers .list-group-item').text().trim() === 'No managers assigned.') {
            $('#current_managers').html(html);
          } else {
            $('#current_managers').append(html);
          }
          $('#manager_search').val('');
          $('#addLocationManager input[name="manager_id"]').remove();
        }
      },
      error: function(res) {
        obj.attr('disabled',false);  
        ajax_error(res);
      }
    });
  });

  $(document).on('click', '.remove-manager', function() {
    let obj = $(this);
    obj.attr('disabled',true);
    let teamId = $(this).data('id');
    $.ajax({
      url: APP_URL + '/remove-location-manager',
      type: 'POST',
      data: { _token: _token, team_id: teamId },
      success: function(res) {
        obj.attr('disabled',false);
        if(res.status) {
          // Remove manager from the list without reload
          obj.closest('li').remove();
          if($('#current_managers .list-group-item').length === 0) {
            $('#current_managers').html('<li class="list-group-item">No managers assigned.</li>');
          }
        }
      },
      error: function(res) {
        obj.attr('disabled',false);  
        ajax_error(res);
      }
    });
  });

  $(document).on('click', '#btn_savesplitperc', function(){
    let obj = $(this);
    obj.attr('disabled',true);
    let locationId = $('#locationid').val();
    let people = $('#payout_people').val();
    let studio = $('#payout_studio').val();
    let events = $('#payout_events').val();
    let rentals = $('#payout_rentals').val();
    $.ajax({
        type: 'POST',
        dataType: 'json',
        data: { _token:_token, location_id: locationId, people: people, studio:studio, events: events, rentals: rentals },
        url: APP_URL+"/save-default-split",
        success: function(res) {
          obj.attr('disabled',false);
          if(res.status){
            $('#alertMsg .pagemsgcontent').html('<div class="alert alert-success">'+res.message+'</div>');
            $('#alertMsg').modal('show');
          }
        },
        error: function(res) {
          obj.attr('disabled',false);  
          ajax_error(res);
        }
    });
  });

  $(document).on('click', '.vieweye', function(){
      $('.gridcard').removeClass('col-xl-12').addClass('col-xl-7');
      $('.user-card').show();
      $('.user-card .card-body').html('<div class="pt-5 d-flex justify-content-center"><div class="spinner-grow" role="status"></div></div>');
      
      let uuid = $(this).data('uuid');
      $.ajax({
          type: 'POST',
          dataType: 'json',
          data: {_token:_token, uuid:uuid, type:'view'},
          url: APP_URL+"/userinfo",
          success: function(res) {
            if(res.status){
              $('.user-card .card-body').html(res.content);
            }
          },
          error: function(res) {                    
            ajax_error(res);
          }
      });
    });
});
</script>
@endsection