@extends('layouts.sidebar')
@section('title', 'Nomadic-Schedule Location')
@section('content')
<section class="section profile position-relative">
  <div class="col-xl-12">
    <!-- Bordered Tabs -->
    <input type="hidden" id="lpid"value="{{$page->id}}" readonly>
    <input type="hidden" id="locationId" name="locationId" value="{{$locationId}}" readonly>
    <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="Schedule-tab" data-bs-toggle="tab" data-bs-target="#bordered-Schedule" type="button" role="tab" aria-controls="Schedule" aria-selected="true">Schedule</button>
      </li>
      <li class="nav-item " role="presentation">
        <button class="nav-link" id="General-tab" data-bs-toggle="tab" data-bs-target="#bordered-General" type="button" role="tab" aria-controls="General" aria-selected="false">General</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="studios-tab" data-bs-toggle="tab" data-bs-target="#bordered-studios" type="button" role="tab" aria-controls="Studios" aria-selected="false">Studios</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="team-tab" data-bs-toggle="tab" data-bs-target="#bordered-team" type="button" role="tab" aria-controls="team" aria-selected="false">Team</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="Default-Splits-tab" data-bs-toggle="tab" data-bs-target="#bordered-Default-Splits" type="button" role="tab" aria-controls="Default-Splits" aria-selected="false">Default Splits</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="booking-tab" data-bs-toggle="tab" data-bs-target="#bordered-booking" type="button" role="tab" aria-controls="Booking" aria-selected="false">Points Balance</button>
      </li>
    </ul>
    <div class="tab-content pt-2" id="borderedTabContent">
      <div class="tab-pane fade show active" id="bordered-Schedule" role="tabpanel" aria-labelledby="Schedule-tab">
        <div class="row">
          <div class="col-md-12">
            <div id="calendar"></div>
          </div>
        </div>
      </div>
      <div class="tab-pane fade" id="bordered-Default-Splits" role="tabpanel" aria-labelledby="Default-Splits-tab">
        <form id="saveDefaultSplits">
          @csrf
          <input type="hidden" id="location_id" name="location_id" value="{{$locationId}}" readonly>
          <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">Default Splits</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">Team Member (%)</label>
                      <input type="number" min="0" max="100" step="1" class="form-control" name="payout_people" value="@if(isset($data) && isset($data->def_split_perc_people)){{$data->def_split_perc_people}}@endif" placeholder="People %" required>
                    </div>
                    <div class="col-md-3 mb-2">
                      <label for="payout_studio">Studio Manager (%)</label>
                      <input type="number" min="0" max="100" step="1" class="form-control" name="payout_studio" value="@if(isset($data) && isset($data->def_split_perc_studio)){{$data->def_split_perc_studio}}@endif" placeholder="Studio %" required>
                    </div>
                    <div class="col-md-3 mb-2">
                      <label for="payout_events">Event Manager (%)</label>
                      <input type="number" min="0" max="100" step="1" class="form-control" name="payout_events" value="@if(isset($data) && isset($data->def_split_perc_event)){{$data->def_split_perc_event}}@endif" placeholder="Events %" required>
                    </div>
                    <div class="col-md-3 mb-2">
                      <label for="payout_rentals">Rental Manager(%)</label>
                      <input type="number" min="0" max="100" step="1" class="form-control" name="payout_rentals" value="@if(isset($data) && isset($data->def_split_perc_rental)){{$data->def_split_perc_rental}}@endif" placeholder="Rentals %" required>
                    </div>
                    <div class="col-md-6 mb-2">
                      <label></label>
                      <button id="btn_savedefsplitperc" type="button" class="btn btn-primary mt-4">Save Default Splits</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="tab-pane fade" id="bordered-General" role="tabpanel" aria-labelledby="General-tab">
        <form id="saveProfile">
          <!-- <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">Streaming Settings</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">
                      <div class="position-relative mt-4">
                        <label>Stream Url 1</label>
                        <input disabled type="text" class="form-control" placeholder="Stream Url 1" value="@if($data){{$data->stream_url1}}@endif">
                      </div>
                
                      <div class="row position-relative mt-4">
                        <label>Stream Key 1</label>
                        <div class="col-md-10">
                          <input disabled type="text" class="form-control" placeholder="Stream Key 1" value="@if($data){{$data->stream_key1}}@endif">
                        </div>
                        @if(isset($data->stream_key1) && !is_null($data->stream_key1))
                        <div class="col-md-2">
                          <a class="reset-key pointer" data-type="location" data-id="{{$data->id}}" data-num="1" >Reset</a>
                        </div>
                        @endif
                      </div>

                      <div class="position-relative mt-4">
                        <label>Stream Url 2</label>
                        <input disabled type="text" class="form-control" placeholder="Stream Url 2" value="@if($data){{$data->stream_url2}}@endif">
                      </div>
                      <div class="row position-relative mt-4">
                         <label>Stream Key 2</label>
                        <div class="col-md-10">
                          <input disabled type="text" class="form-control" placeholder="Stream Key 2" value="@if($data){{$data->stream_key2}}@endif">
                        </div>
                        @if(isset($data->stream_key2) && !is_null($data->stream_key2))
                        <div class="col-md-2">
                          <a class="reset-key pointer" data-type="location" data-id="{{$data->id}}" data-num="2" >Reset</a>
                        </div>
                        @endif
                      </div>
                    </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">Additional Guest Points</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 type="number" class="form-control" name="additional_guest_points" placeholder="Additional Guest Points" value="@if(isset($page->additional_guest_points)){{$page->additional_guest_points}}@endif" />
                    </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">Location Taxes</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">
                      <label>Studio Tax (%)</label>
                      <input type="number" class="form-control" name="studio_tax" placeholder="Studio Tax" value="@if(isset($data->studio_tax_perc)){{$data->studio_tax_perc}}@endif" />
                      <label class="mt-3">Resource Tax (%)</label></br>
                      <input type="number" class="form-control" name="resource_tax" placeholder="Resource Tax" value="@if(isset($data->resource_tax_perc)){{$data->resource_tax_perc}}@endif" />
                      <label class="mt-3">Equipment Tax (%)</label></br>
                      <input type="number" class="form-control" name="equipment_tax" placeholder="Equipment Tax" value="@if(isset($data->equipment_tax_perc)){{$data->equipment_tax_perc}}@endif" />
                    </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">Details</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">
                      <label>Address</label>
                      <input type="text" class="form-control" name="address" placeholder="Address" value="@if(isset($page->address)){{$page->address}}@endif" />
                      <label class="mt-3">Opening hours</label></br>
                      <textarea name="opening_hours" class="form-control txtarea mb-3" rows="4" placeholder="Opening hours">@if(isset($page->opening_hours)){{$page->opening_hours}}@endif</textarea>
                      <label class="mt-3">Phone</label></br>
                      <input type="text" class="form-control" name="phone" placeholder="Phone" value="@if(isset($page->phone)){{$page->phone}}@endif" />
                      <label class="mt-3">Email</label></br>
                      <input type="text" class="form-control" name="email" placeholder="Email address" value="@if(isset($page->email)){{$page->email}}@endif"/>
                      <label class="mt-3">How to get there</label></br>
                      <textarea name="how_to_get_there" class="form-control txtarea mb-3" rows="4" placeholder="Hot to get there">@if(isset($page->how_to_get_there)){{$page->how_to_get_there}}@endif</textarea>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row mt-3">
            <div class="col-md-12 text-center">
              <input id="btn_saveloclandingpage" type="button" class="btn btn-primary mb-2 mt-4" value="Save changes">
            </div>
          </div>
        </form>
      </div>

      <div class="tab-pane fade " id="bordered-studios" role="tabpanel" aria-labelledby="studios-tab">
        <div class="row">
          <div class="gridcard col-xl-12">
            <div class="card">
              <div class="row">
                <div class="col-md-7 position-relative">
                  <input id="studio_search_field" type="text" class="form-control" placeholder="Search" value="{{$searchTerm2}}">
                  <i class="bi bi-search studiosearchicon"></i>
                </div>
                <div class="col-md-4">
                  <button type="button" class="btn float-end addicon"><i class="bi bi-plus"></i> Add New Studio</button>
                </div>
              </div>
              <div class="card-body profile-card pl-0 d-flex flex-column align-items-center">
                <table class="table"> 
                  <tbody>
                    @if(!empty($local_studios) && $local_studios->count())
                      @foreach($local_studios as $dt)
                      <tr>
                        <td>{{$dt->name}}</td>
                        <td align="right">
                          <i class="bi bi-pencil editicon" data-uuid="{{$dt->id}}"></i>
                        </td>
                      </tr>
                      @endforeach
                    @else
                    <tr>
                      <td colspan="2">No record found</td>
                    </tr>  
                    @endif
                  </tbody>
                  <tfoot>
                    <tr>
                      <td colspan="2">
                        <div class="foot-paging">
                          {!! $local_studios->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" style="min-height:500px;">
              <div class="card-body pt-3">
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="tab-pane fade " id="bordered-team" role="tabpanel" aria-labelledby="team-tab">
        <div class="row">
          <div class="gridcard col-xl-12">
            <div class="card">
              <div class="row">
                <div class="col-md-5 position-relative">
                  <input id="locationId" type="hidden" value="{{$locationId}}" readonly>
                  <input id="search_field" type="text" class="form-control" placeholder="Search/Add Member" value="{{$searchTerm}}">
                  <i class="bi bi-search teamsearchicon" title="Search Member"></i>&nbsp;
                  <i class="bi bi-plus-circle searchmember" title="Add Member"></i>
                </div>
              </div>
              <div class="card-body profile-card pl-0 d-flex flex-column align-items-center">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Email</th>
                      <th>Role</th>
                      <th>Manager</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    @if(!empty($team) && $team->count())
                      @foreach($team as $dt)
                      <tr>
                        <td>{{$dt->fname}} {{$dt->lname}}</td>  
                        <td>{{$dt->email}}</td>                        
                        <td>{{$dt->role_name}}</td>
                        <td>{{$dt->manager_fname}} {{$dt->manager_lname}}</td>
                        <td>
                          <i class="bi bi-pencil editteam" data-uuid="{{$dt->uuid}}"></i>&nbsp;
                          <i class="bi bi-trash removeteam" data-uuid="{{$dt->id}}"></i>
                        </td>
                      </tr>
                      @endforeach
                    @else
                    <tr>
                      <td colspan="5">No record found</td>
                    </tr>  
                    @endif
                  </tbody>
                  <tfoot>
                    <tr>
                      <td colspan="5">
                        <div class="foot-paging">
                          {!! $team->withQueryString()->links('vendor.pagination.bootstrap-5') !!}
                        </div>  
                      </td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </div>
          </div>

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

      <div class="tab-pane fade" id="bordered-booking" role="tabpanel" aria-labelledby="booking-tab">
        <div class="mb-4">
          <div class="heading3 mt-3 mb-2">Points balance</div>
          <div class="col-md-6 border border-dark">
            <div class="row p-2 pt-4">
              <div class="col-md-6">Last month booking cost</div>
              <div class="col-md-5 text-end">{{$last_month_booking_cost}}pts</div>
            </div>
            <div class="row p-2">
              <div class="col-md-6">Current month booking cost</div>
              <div class="col-md-5 text-end">{{$current_month_booking_cost}}pts</div>
            </div>
            <div class="row p-2 pb-4">
              <div class="col-md-6"><b>Current balance</b></div>
              <div class="col-md-5 text-end"><b>{{$current_balance}}pts</b></div>
            </div>
          </div>
        </div>
        <div class="row ms-1">
          <div class="heading3 ps-0 mb-2">Transactions</div>
          <table class="table">
            <thead>  
              <tr>
                <td>Date</td>
                <td>Status</td>
                <td>Points</td>
              </tr>
            </thead>
            <tbody>
              @foreach($points as $point)
                <tr>
                  <td>{{date('d M Y',strtotime($point->created_at))}}</td>
                  <td>{{$points_action[$point->action]}}</td>
                  <td><span class="text-success">+{{$point->credit}}pts</span></td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div> 
      </div>
      
    </div>
    <!-- End Bordered Tabs -->
  </div>
</section>
@endsection
@section('footer_scripts')
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/bootstrap5@6.1.9/index.global.min.js'></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var calendarEl = document.getElementById('calendar');
    var modal = document.getElementById("createplanner");
    var calendar = new FullCalendar.Calendar(calendarEl, {
      timeZone: 'UTC',
      themeSystem: 'bootstrap5',
      headerToolbar: {
        left: 'today prev,next',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      navLinks: true, 
      selectable: true,
      nowIndicator: true,
      dayMaxEvents: true, 
      editable: true,
      selectable: true,
      businessHours: false,
      dayMaxEvents: true, 
      weekNumbers: false,
      dayMaxEvents: true,
      events: @json($events),
      eventClick: function(info) {
        let startTime = info.event.start.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: true });
        let startDate = info.event.start.getDay() +' '+months[info.event.start.getMonth()] +' '+ info.event.start.getFullYear()+' '+startTime;
        let endTime = info.event.end.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: true });
        let endDate = info.event.end.getDay() +' '+months[info.event.end.getMonth()] +' '+ info.event.end.getFullYear()+' '+endTime;
        
        booking_html(startDate, endDate, info.event.extendedProps);
      },
      eventDrop: function (info) {
        var newDate = new Date(info.event.start);
        if (newDate < Date.now()) {
            info.revert();
        }
      }
    });
    calendar.render();
    var evt = document.createEvent('UIEvents');
    evt.initUIEvent('resize', true, false, window, 0);
    window.dispatchEvent(evt);
  });
  $(document).ready(function () {
    
    $(document).on('click', '#btn_savedefsplitperc', function(){
      $.ajax({
          type: 'POST',
          dataType: 'json',
          data: $('#saveDefaultSplits').serialize(),
          url: APP_URL+"/save-loc-default-split",
          success: function(res) {
            if(res.status){
              $('#alertMsg .pagemsgcontent').html('<div class="alert alert-success">Default splits saved successfully.</div>');
              $('#alertMsg').modal('show');
            }
          },
          error: function(res) {                    
            ajax_error(res);
          }
      });
    });
    
    $(document).on('click','.studiosearchicon',function(){
      let studio_search = $('#studio_search_field').val();
      if($.trim(studio_search)!=""){
        let locationId = $('#locationId').val();
        window.location.href = APP_URL+'/backend/schedule-location/'+locationId+'/?studioname='+studio_search+'#studios-tab';
      }
    });
    $(document).on('click','.teamsearchicon',function(){
      let search = $('#search_field').val();
      if($.trim(search)!=""){
        let locationId = $('#locationId').val();
        window.location.href = APP_URL+'/backend/schedule-location/'+locationId+'/?name='+search+'#team-tab';
      }
    });
    $(document).on('click', '.addicon, .editicon', 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');
      let locationId = $("#locationId").val();
      $.ajax({
          type: 'POST',
          dataType: 'json',
          data: {_token:_token, lid:uuid,type:'edit',locationId:locationId},
          url: APP_URL+"/studio-detail",
          success: function(res) {
            if(res.status){
              $('.user-card .card-body').html(res.content);
              $('select[name="crew[]"]').selectpicker();
            }
          },
          error: function(res) {                    
            ajax_error(res);
          }
      });
    });
    $(document).on('click', '#btn_delete', function(){
      let obj = $(this);
      obj.attr('disabled',true);
      let did = obj.data('did');
      let type = obj.data('type');
      $.ajax({
          type: 'POST',
          dataType: 'json',
          data: {_token:_token, type:type, did:did},
          url: APP_URL+"/remove-action",
          success: function(res) {
            obj.attr('disabled',false);
            if(res.status){
              reload_tab('#studios-tab');
            }
          },
          error: function(res) {
            obj.attr('disabled',false);  
            ajax_error(res);
          }
      });
    });
    $(document).on('click', '#btn_saveStudio', function(){
      let obj = $(this);
      obj.attr('disabled',true);
      $.ajax({
          type: 'POST',
          dataType: 'json',
          data: $('#updateStudio').serialize(),
          url: APP_URL+"/save-studio",
          success: function(res) {
            obj.attr('disabled',false);
            if(res.status){
              reload_tab('#studios-tab');
            }
          },
          error: function(res) {
            obj.attr('disabled',false);  
            ajax_error(res);
          }
      });
    });
    $(document).on('click','#btn_saveloclandingpage',function(){
      let lpid = $('#lpid').val();
      let studio_tax = $('input[name="studio_tax"]').val();
      let equipment_tax = $('input[name="equipment_tax"]').val();
      let resource_tax = $('input[name="resource_tax"]').val();
      let additional_guest_points = $('input[name="additional_guest_points"]').val();
      let location_id = $('#location_id').val();
      let phone = $('input[name="phone"]').val();
      let email = $('input[name="email"]').val();
      let address = $('input[name="address"]').val();
      let opening_hours = $('textarea[name="opening_hours"]').val();
      let how_to_get_there = $('textarea[name="how_to_get_there"]').val();
      $.ajax({
        type: 'POST',
        dataType: 'json',
        data: {_token:_token, lpid:lpid, phone:phone, email:email, address:address, opening_hours:opening_hours, how_to_get_there:how_to_get_there, additional_guest_points:additional_guest_points, studio_tax:studio_tax, equipment_tax:equipment_tax, resource_tax:resource_tax, type:'edit'},
        url: APP_URL+"/backend/location-landing-page-save/"+location_id,
        success: function(res) {
          if(res.status){
            $('#alertMsg .pagemsgcontent').html('<div class="alert alert-success">General information saved successfully.</div>');
            $('#alertMsg').modal('show');
          }
        },
        error: function(res) {                    
          ajax_error(res);
        }
      });
    });

    // Team tab
    $(document).on('click', '.editteam', function(){
      $('.gridcard').removeClass('col-xl-12').addClass('col-xl-6');
      $('.team-card').show();
      $('.team-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');
      let locationId = $('#locationId').val();
      $.ajax({
          type: 'POST',
          dataType: 'json',
          data: {_token:_token, uuid:uuid,type:'edit',locationId:locationId},
          url: APP_URL+"/teaminfo",
          success: function(res) {
            if(res.status){
              $('.team-card .card-body').html(res.content);
              $('select[name="roles[]"]').html(res.options).selectpicker('refresh');
              $('select[name="specialist[]"]').html(res.specialist_option).selectpicker('refresh');
              //$('select[name="specialist[]"]').selectpicker();
              $('select[name="studios[15]"]').selectpicker();
            }
          },
          error: function(res) {                    
            ajax_error(res);
          }
      });
    });
    $(document).on('click', '#btn_saveTeam', function(){
      let roles = $('select[name="roles[]"]').val();
      if(roles==null || roles.length==0){
        $('#alertMsg .pagemsgcontent').html('<div class="alert alert-danger">Please select at least one role to proceed.</div>');
        $('#alertMsg').modal('show');
        return false;
      }
    
      let obj = $(this);
      obj.attr('disabled',true);
      $.ajax({
          type: 'POST',
          dataType: 'json',
          data: $('#teamEditForm').serialize(),
          url: APP_URL+"/save-team",
          success: function(res) {
            obj.attr('disabled', false);
            if(res.status){
                $('.gridcard').removeClass('col-xl-7').addClass('col-xl-12');
                $('.team-card').hide();
                $('.team-card .card-body').html('');
                $('#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', '.searchmember', function(){
      let search_term = $('#search_field').val();
      if(search_term==""){ return false; }
      let locationId = $('#locationId').val();
      $.ajax({
          type: 'POST',
          dataType: 'json',
          data: {_token:_token, search_term:search_term, location:locationId, type:'team'},
          url: APP_URL+"/search-member",
          success: function(res) {
            if(res.status){
              $('#member_modal .modal-body').html(res.content);
              $('#member_modal').modal('show');
            }
          },
          error: function(res) {
            ajax_error(res);
          }
      });
    });
    $(document).on('click', '.addmember', function(){
      let uuid = $(this).data('uuid');
      let locationId = $('#locationId').val();
      $(this).attr('disabled', true);
      $.ajax({
          type: 'POST',
          dataType: 'json',
          data: {_token:_token, uuid:uuid, location:locationId},
          url: APP_URL+"/add-team-member",
          success: function(res) {
            if(res.status){
              window.location.assign(APP_URL+'/backend/schedule-location/'+locationId+'#team-tab');
              window.location.reload();
            }
          },
          error: function(res) {
            ajax_error(res);
          }
      });
    });
    $(document).on('click', '.removeteam', function(){
      if(confirm("Are you sure want to remove this user from your team?") == true){
        let uuid = $(this).data('uuid');
        let locationId = $('#locationId').val();
        $.ajax({
            type: 'POST',
            dataType: 'json',
            data: {_token:_token, uuid:uuid, location:locationId},
            url: APP_URL+"/remove-team-member",
            success: function(res) {
              if(res.status){
                window.location.assign(APP_URL+'/backend/schedule-location/'+locationId+'#team-tab');
                window.location.reload();
              }
            },
            error: function(res) {
              ajax_error(res);
            }
        });
      }
    });
    $(document).on('change', '#role_select', function(){
      let selected = $(this).val() || [];
      let html = '';
      if(selected.length > 0) {
        html += '<div class="row mt-2">';
        selected.forEach(function(roleId) {
          let studioperc = $('#perc_studio').val();
          let peopleperc = $('#perc_people').val();
          let eventperc = $('#perc_event').val();
          let rentalperc = $('#perc_rental').val();
          let roleText = $('#role_select option[value="'+roleId+'"]').text().replace(/Manager/gi, '').trim();
          if(roleText.toLowerCase().includes('studio')) {
            let locstudios = $('#locstudios').html();
            html += '<div class="col-md-4 mb-2">';
            html += `<label>Studio</label>`;
            html += `<select name="studios[${roleId}]" class="form-control selectpicker" data-live-search="true">`;
            html += locstudios;
            html += '</select>';
            html += '</div>';
            html += '<div class="col-md-4 mb-2">';
            html += `<label>Studio Split (%)</label>`;
            html += `<input type="number" min="0" max="100" step="1" name="split_role[${roleId}]" class="form-control" placeholder="Studio Split %" value="${studioperc}">`;
            html += '</div>';
            html += '<div class="col-md-4 mb-2">';
            html += '<label>People Split (%)</label>';
            html += `<input type="number" min="0" max="100" step="1" name="split_people[${roleId}]" class="form-control" placeholder="People %" value="${peopleperc}">`;
            html += '</div>';
          } else {
            html += '<div class="col-md-6 mb-2">';
            html += `<label>${roleText} Split (%)</label>`;
            if(roleId==5){
              html += `<input type="number" min="0" max="100" step="1" name="split_role[${roleId}]" class="form-control" placeholder="${roleText} %" value="${eventperc}">`;
            }else if(roleId==6){
              html += `<input type="number" min="0" max="100" step="1" name="split_role[${roleId}]" class="form-control" placeholder="${roleText} %" value="${rentalperc}">`;
            }else{
              html += `<input type="number" min="0" max="100" step="1" name="split_role[${roleId}]" class="form-control" placeholder="${roleText} %">`;
            }
            html += '</div>';
            html += '<div class="col-md-6 mb-2">';
            html += '<label>People Split (%)</label>';
            html += `<input type="number" min="0" max="100" step="1" name="split_people[${roleId}]" class="form-control" placeholder="People %" value="${peopleperc}">`;
            html += '</div>';
          }
        });
        html += '</div>';
      }
      $('#role_split_container').html(html);
      $('.selectpicker').selectpicker('refresh');
    });

  });
</script>

@endsection