@extends('layouts.sidebar')
@section('title', 'Nomadic-Studio')
@section('content')
<section class="section profile position-relative">
  <div class="col-xl-12">
    <!-- Bordered Tabs -->
    <input type="hidden" id="daily_rate" value="{{convertCurrency($studio->daily_rate)}}">
    <input type="hidden" id="hourly_rate" value="{{convertCurrency($studio->hourly_rate)}}">
    <input type="hidden" id="locationId" name="locationId" value="{{$locationId}}" readonly>
    <input type="hidden" id="studioId" name="studioId" value="{{$studioId}}" 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" 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="Inventory" data-bs-toggle="tab" data-bs-target="#bordered-Inventory" type="button" role="tab" aria-controls="Inventory" aria-selected="false">Inventory</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>
    </ul>
    <div class="tab-content pt-2" id="borderedTabContent">
      <div class="tab-pane fade show active" id="bordered-Schedule" role="tabpanel" aria-labelledby="Schedule">
        <div class="row">
          <div class="col-md-8">
            <div id="calendar"></div>
          </div>
          <div class="col-md-4">
              <div class="col-md-12 p-0">
                <form id="scheduleCalendar">
                  @csrf
                  <input type="hidden" id="type" name="type" value="studio" readonly>
                  <input type="hidden" id="refrence_id" name="refrence_id" value="{{$studioId}}" readonly>
                  <input type="hidden" id="schedule_id" name="schedule_id" value="">
                  <input type="hidden" id="edit_schedule_type" name="edit_schedule_type" value="">
                  <input type="hidden" id="schedule_location" name="schedule_location" value="{{$locationId}}">
                  <h5 class="fw-bolder mt-2">Availablitiy & prices</h5>

                  <label>Minimum Booking Time</label>
                  <div class="row mb-3">
                    <div class="col-md-4 position-relative mb-1">
                      <select class="form-control" id="min_days" name="min_days">
                        <option value="0" selected>Days</option>
                        @for ($i = 1; $i <= 30; $i++)
                          @php $value = str_pad($i, 2, '0', STR_PAD_LEFT); @endphp
                          <option value="{{ $value }}" @if($i==$min_booking['min_days']) selected @endif>{{ $value }}</option>
                        @endfor
                      </select>
                      <i class="bi bi-caret-down-fill searchicon"></i>
                    </div>
                    <div class="col-md-4 position-relative mb-1">
                      <select class="form-control" id="min_hours" name="min_hours">
                        <option value="00">Hours</option>  
                        @for ($i = 1; $i <= 23; $i++)
                          @php $value = str_pad($i, 2, '0', STR_PAD_LEFT); @endphp
                          <option value="{{ $value }}" @if(($i==2 && empty($min_booking['min_hours'])) || $i==$min_booking['min_hours']) selected @endif>{{ $value }}</option>
                        @endfor
                      </select>
                      <i class="bi bi-caret-down-fill searchicon"></i>
                    </div>
                    <div class="col-md-4 position-relative mb-1">
                      <select class="form-control" id="min_minutes" name="min_minutes">
                        <option value="00" @if(00==$min_booking['min_minutes']) selected @endif>Minutes</option>  
                        <option value="15" @if(15==$min_booking['min_minutes']) selected @endif>15</option>
                        <option value="30" @if(30==$min_booking['min_minutes']) selected @endif>30</option>
                        <option value="45" @if(45==$min_booking['min_minutes']) selected @endif>45</option>
                      </select>
                      <i class="bi bi-caret-down-fill searchicon"></i>
                    </div>
                  </div>

                  <label>Maximum Booking Time</label>
                  <div class="row mb-3">
                    <div class="col-md-4 position-relative mb-1">
                      <select class="form-control" id="max_days" name="max_days">
                        <option value="0">Days</option>
                        @for ($i = 1; $i <= 30; $i++)
                          @php $value = str_pad($i, 2, '0', STR_PAD_LEFT); @endphp
                          <option value="{{ $value }}" @if(($i==5 && empty($max_booking['max_days'])) || $i==$max_booking['max_days']) selected @endif>{{ $value }}</option>
                        @endfor
                      </select>
                      <i class="bi bi-caret-down-fill searchicon"></i>
                    </div>
                    <div class="col-md-4 position-relative mb-1">
                      <select class="form-control" id="max_hours" name="max_hours">
                        <option value="00">Hours</option>  
                        @for ($i = 1; $i <= 23; $i++)
                          @php $value = str_pad($i, 2, '0', STR_PAD_LEFT); @endphp
                          <option value="{{ $value }}" @if($i==$max_booking['max_hours']) selected @endif>{{ $value }}</option>
                        @endfor
                      </select>
                      <i class="bi bi-caret-down-fill searchicon"></i>
                    </div>
                    <div class="col-md-4 position-relative mb-1">
                      <select class="form-control" id="max_minutes" name="max_minutes">
                        <option value="00" @if(00==$max_booking['max_minutes']) selected @endif>Minutes</option>  
                        <option value="15" @if(15==$max_booking['max_minutes']) selected @endif>15</option>
                        <option value="30" @if(30==$max_booking['max_minutes']) selected @endif>30</option>
                        <option value="45" @if(45==$max_booking['max_minutes']) selected @endif>45</option>
                      </select>
                      <i class="bi bi-caret-down-fill searchicon"></i>
                    </div>
                  </div>

                  <div class="row mt-3">
                    <div class="col-md-12 position-relative">
                      <select class="form-control" name="availability_type">
                        <option value="0">Daily availability</option>
                        <option value="1">Recurring availability</option>
                      </select>
                      <i class="bi bi-caret-down-fill searchicon"></i>
                    </div>
                  </div>
                  <div id="dailyAvailCont" class="mt-3">
                    <div style="overflow-x:auto">
                      <table class="table table-borderless tbl_boolingdtlsiner avlpricetbl">
                        <thead class="borderbottomnone">
                          <tr>
                            <td class="avltxt" colspan="3"><i class="bi bi-clock"></i> Daily Availability</td>
                            <td class="avltxtsmall">Daily ({{session()->get('user_currency')}})</td>
                            <td class="avltxtsmall">Hourly ({{session()->get('user_currency')}})</td>
                            <td class="avltxt"><i id="add_daily_click" class="bi bi-plus float-right f20"></i></td>
                          </tr>
                        </thead>
                        <tbody id="daily_container">
                          <tr>
                            <td>
                              <input name="daily_start_date[0]" type="date" class="form-control"  style="width:100px;" data-index="0" onkeyup="validateDateTime(0)">
                            </td>
                            <td><input name="daily_start_time[0]" type="text" class="form-control timepicker" readonly data-index="0" placeholder="Start time" onkeyup="validateDateTime(0)"></td>
                            <td><input name="daily_end_time[0]" type="text" class="form-control timepicker1" readonly data-index="0" placeholder="End time" onkeyup="validateDateTime(0)"></td>
                            <td><input name="daily_daily_rate[0]" type="number" class="form-control" placeholder="0" value="{{convertCurrency($studio->daily_rate)}}"></td>
                            <td><input name="daily_hourly_rate[0]" type="number" class="form-control" placeholder="0" value="{{convertCurrency($studio->hourly_rate)}}"></td>
                            <td><i class="bi bi-trash daily-trash f20"></i></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <div class="clearfix"></div>
                  </div>
                  <div id="recuAvailCont" class="mt-4" style="display:none;">
                    <div style="overflow-x:auto">  
                      <table class="table table-borderless tbl_boolingdtlsiner mt-4 avlpricetbl">
                        <thead class="borderbottomnone">
                          <tr>
                            <td class="avltxt" colspan="3"><i class="bi bi-clock"></i> Recurring Availability</td>
                            <td class="avltxtsmall">Daily ({{session()->get('user_currency')}})</td>
                            <td class="avltxtsmall">Hourly ({{session()->get('user_currency')}})</td>
                            <td class="avltxt"></td>
                          </tr>
                        </thead>
                        <tbody>
                          <tr class="row-0">
                            <td class="fw-bold"><input class="recurrchk" data-day="0" name="recurring_days[0]" type="checkbox" value="0">Mon</td>
                            <td>
                              <input name="recurring_start_time[0][0]" type="text" data-index="0" class="form-control timepicker" placeholder="Start time" readonly onkeyup="validateDateTimeRecu(0,0)">
                            </td>
                            <td>
                              <input name="recurring_end_time[0][0]" type="text" class="form-control timepicker1" placeholder="End time" readonly onkeyup="validateDateTimeRecu(0,0)">
                            </td>
                            <td><input name="recurring_daily_rate[0][0]" type="number" class="form-control" placeholder="0" value="{{convertCurrency($studio->daily_rate)}}"></td>
                            <td><input name="recurring_hourly_rate[0][0]" type="number" class="form-control" placeholder="0" value="{{convertCurrency($studio->hourly_rate)}}"></td>
                            <td>
                              <i class="bi bi-plus add-recurring-days f20" data-day="0"></i>
                            </td>
                          </tr>
                          <tr class="row-1">
                            <td class="fw-bold"><input class="recurrchk" data-day="1" name="recurring_days[1]" type="checkbox" value="1">Tue</td>
                            <td>
                              <input name="recurring_start_time[1][0]" type="text" data-index="0" class="form-control timepicker" placeholder="Start time" readonly onkeyup="validateDateTimeRecu(1,0)">
                            </td>
                            <td>
                              <input name="recurring_end_time[1][0]" type="text" class="form-control timepicker1" readonly placeholder="End time" onkeyup="validateDateTimeRecu(1,0)">
                            </td>
                            <td><input name="recurring_daily_rate[1][0]" type="number" class="form-control" placeholder="0" value="{{convertCurrency($studio->daily_rate)}}"></td>
                            <td><input name="recurring_hourly_rate[1][0]" type="number" class="form-control" placeholder="0" value="{{convertCurrency($studio->hourly_rate)}}"></td>
                            <td>
                              <i class="bi bi-plus add-recurring-days f20" data-day="1"></i>
                            </td>
                          </tr>
                          <tr class="row-2">
                            <td class="fw-bold"><input class="recurrchk" data-day="2" name="recurring_days[2]" type="checkbox" value="2">Wed</td>
                            <td>
                              <input name="recurring_start_time[2][0]" type="text" data-index="0" class="form-control timepicker" placeholder="Start time" readonly onkeyup="validateDateTimeRecu(2,0)">
                            </td>
                            <td>
                              <input name="recurring_end_time[2][0]" type="text" class="form-control timepicker1" readonly placeholder="End time" onkeyup="validateDateTimeRecu(2,0)">
                            </td>
                            <td><input name="recurring_daily_rate[2][0]" type="number" class="form-control" placeholder="0" value="{{convertCurrency($studio->daily_rate)}}"></td>
                            <td><input name="recurring_hourly_rate[2][0]" type="number" class="form-control" placeholder="0" value="{{convertCurrency($studio->hourly_rate)}}"></td>
                            <td>
                              <i class="bi bi-plus add-recurring-days f20" data-day="2"></i>
                            </td>
                          </tr>
                          <tr class="row-3">
                            <td class="fw-bold"><input class="recurrchk" data-day="3" name="recurring_days[3]" type="checkbox" value="3">Thu</td>
                            <td>
                              <input name="recurring_start_time[3][0]" type="text" readonly data-index="0" class="form-control timepicker" placeholder="Start time" onkeyup="validateDateTimeRecu(3,0)">
                            </td>
                            <td>
                              <input name="recurring_end_time[3][0]" type="text" class="form-control timepicker1" readonly placeholder="End time" onkeyup="validateDateTimeRecu(3,0)">
                            </td>
                            <td><input name="recurring_daily_rate[3][0]" type="number" class="form-control" placeholder="0" value="{{convertCurrency($studio->daily_rate)}}"></td>
                            <td><input name="recurring_hourly_rate[3][0]" type="number" class="form-control" placeholder="0" value="{{convertCurrency($studio->hourly_rate)}}"></td>
                            <td>
                              <i class="bi bi-plus add-recurring-days f20" data-day="3"></i>
                            </td>
                          </tr>
                          <tr class="row-4">
                            <td class="fw-bold"><input class="recurrchk" data-day="4" name="recurring_days[4]" type="checkbox" value="4">Fri</td>
                            <td>
                              <input name="recurring_start_time[4][0]" type="text" data-index="0" class="form-control timepicker" placeholder="Start time" readonly onkeyup="validateDateTimeRecu(4,0)">
                            </td>
                            <td>
                              <input name="recurring_end_time[4][0]" type="text" class="form-control timepicker1" readonly placeholder="End time" onkeyup="validateDateTimeRecu(4,0)">
                            </td>
                            <td><input name="recurring_daily_rate[4][0]" type="number" class="form-control" placeholder="0" value="{{convertCurrency($studio->daily_rate)}}"></td>
                            <td><input name="recurring_hourly_rate[4][0]" type="number" class="form-control" placeholder="0" value="{{convertCurrency($studio->hourly_rate)}}"></td>
                            <td>
                              <i class="bi bi-plus add-recurring-days f20" data-day="4"></i>
                            </td>
                          </tr>
                          <tr class="row-5">
                            <td class="fw-bold"><input class="recurrchk" data-day="5" name="recurring_days[5]" type="checkbox" value="5">Sat</td>
                            <td>
                              <input name="recurring_start_time[5][0]" type="text" data-index="0" class="form-control timepicker" placeholder="Start time" readonly onkeyup="validateDateTimeRecu(5,0)">
                            </td>
                            <td>
                              <input name="recurring_end_time[5][0]" type="text" class="form-control timepicker1" readonly placeholder="End time" onkeyup="validateDateTimeRecu(5,0)">
                            </td>
                            <td><input name="recurring_daily_rate[5][0]" type="number" class="form-control" placeholder="0" value="{{convertCurrency($studio->daily_rate)}}"></td>
                            <td><input name="recurring_hourly_rate[5][0]" type="number" class="form-control" placeholder="0" value="{{convertCurrency($studio->hourly_rate)}}"></td>
                            <td>
                              <i class="bi bi-plus add-recurring-days f20" data-day="5"></i>
                            </td>
                          </tr>
                          <tr class="row-6">
                            <td class="fw-bold"><input class="recurrchk" data-day="6" name="recurring_days[6]" type="checkbox" value="6">Sun</td>
                            <td>
                              <input name="recurring_start_time[6][0]" type="text" data-index="0" class="form-control timepicker" placeholder="Start time" readonly onkeyup="validateDateTimeRecu(6,0)">
                            </td>
                            <td>
                              <input name="recurring_end_time[6][0]" type="text" class="form-control timepicker1" readonly placeholder="End time" onkeyup="validateDateTimeRecu(6,0)">
                            </td>
                            <td><input name="recurring_daily_rate[6][0]" type="number" class="form-control" placeholder="0" value="{{convertCurrency($studio->daily_rate)}}"></td>
                            <td><input name="recurring_hourly_rate[6][0]" type="number" class="form-control" placeholder="0" value="{{convertCurrency($studio->hourly_rate)}}"></td>
                            <td>
                              <i class="bi bi-plus add-recurring-days f20" data-day="6"></i>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <!-- <h6 class="fw-bold mt-3 mb-3"><i class="bi bi-globe2"></i> Timeszones</h6> -->
                  <div class="col-md-12 mb-2 mt-2 position-relative">
                    <!-- <select class="form-control">
                      <option>Bali, Indonesia (GMT + 8)</option>
                    </select> 
                    <i class="bi bi-caret-down-fill searchicon rgt0"></i> -->
                    <div class="text-center mt-4 mb-2">
                      <button id="schedule_save" type="button" class="btn btn-primary">Save</button>
                      <button id="schedule_reset" type="button" class="btn btn-primary">Reset</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
        </div>
      </div>
      <div class="tab-pane fade" id="bordered-Inventory" role="tabpanel" aria-labelledby="Inventory">
        <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">
                  <thead>
                  <tr>
                      <td colspan="6">
                        <button type="button" class="btn float-end addicon"><i class="bi bi-plus"></i> Add New Equipment</button>
                      </td>
                    </tr>
                    <tr>
                      <td> Name </td>
                      <td> Category </td>
                      <td> Status </td>
                      <td> Serial Number </td>
                      <td> Price </td>
                      </td></td>
                     
                    </tr>
                  </thead>
                  <tbody>
                    @if(!empty($studio_equipments) && $studio_equipments->count())
                      @foreach($studio_equipments as $dt)
                      <tr>
                        <td>{{$dt->name}}</td>
                         <td>{{$dt->Category->cat_name}}</td>
                         <td>
                          @if($dt->status==0) <span class="bi bi-circle-fill text-danger"></span> Unavailable     
                          @else <span class="bi bi-circle-fill text-success"></span> Available @endif </td>
                          <td>{{$dt->serial_number}}</td>
                          <td>{{convertCurrency($dt->price)}} ({{session()->get('user_currency')}})</td>
                          <td align="right">
                            <i class="bi bi-pencil editicon" data-uuid="{{$dt->id}}"></i>
                          </td>
                      </tr>
                      @endforeach
                    @else
                    <tr>
                      <td colspan="6">No record found</td>
                    </tr>  
                    @endif
                  </tbody>
                  <tfoot>
                    <tr>
                      <td colspan="6">
                        <div class="foot-paging">
                          {!! $studio_equipments->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_team" type="text" class="form-control" placeholder="Search/Add Member" value="{{$searchTermTeam}}">
                  <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>
    <!-- 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>
<link href="{{asset('css/dropzone.min.css')}}" rel="stylesheet">
<link href="{{asset('css/dropzone.custom.css')}}" rel="stylesheet">
<script src="{{asset('js/dropzone.js')}}"></script>
<script type="text/javascript" >
  function dropfiles(){
    Dropzone.autoDiscover = false;
    var myReceipt = new Dropzone("#dropreceipt", {
      url: "{{ route('file.upload') }}",
      method: "post",
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      paramName: "receipt",
      maxFiles: 1,
      acceptedFiles: ".jpeg, .jpg, .png, .pdf",
    });
    myReceipt.on("success", function (file, response) {
      $('.progress-text').html('0%').hide();
      $('#receipt').val(response.fileName);
      $('#dispreceiptimg').html('<img src="'+APP_URL+'/storage/'+response.receiptPath+'" class="img-fluid w-100" style="border-radius:5px;">');
      myReceipt.removeAllFiles(true);
    });
    $('#dropreceipt .dz-txt').html('or drag and drop PNG, JPG or pdf');

    var myManual = new Dropzone("#dropmanual", {
      url: "{{ route('file.upload') }}",
      method: "post",
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      paramName: "manual",
      maxFiles: 1,
      acceptedFiles: ".pdf",
    });
    myManual.on("success", function (file, response) {
      $('.progress-text').html('0%').hide();
      $('#manual').val(response.fileName);
      $('#dispmanualimg').html('<a href="'+APP_URL+'/storage/'+response.manualPath+'"  target="_blank">'+response.fileName+'</a>');
      myManual.removeAllFiles(true);
    });
    $('#dropmanual .dz-txt').html('or drag and drop pdf file');
  }

  $(document).ready(function () {
    scheduleCalendarInit();
    
    $(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();
		  let studioId = $("#studioId").val();
      $.ajax({
          type: 'POST',
          dataType: 'json',
          data: {_token:_token, lid:uuid,type:'edit',locationId:locationId,studioId:studioId},
          url: APP_URL+"/equipment-detail",
          success: function(res) {
            if(res.status){
              $('.user-card .card-body').html(res.content);
			   dropfiles();
            }
          },
          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("#Inventory");
            }
          },
          error: function(res) {
            obj.attr('disabled',false);  
            ajax_error(res);
          }
      });
    });	
    $(document).on('click', '#btn_saveStudio', function(){
      let obj = $(this);
      obj.attr('disabled', true);
      var formData = new FormData($('#updateEquipment')[0]);
      $.ajax({
        type: 'POST',
        dataType: 'json',
        data: formData,
        processData: false,  
        contentType: false,  
        url: APP_URL+"/save-equipment",
        success: function(res) {
          obj.attr('disabled', false);
          if(res.status){
            reload_tab("#Inventory");
          }
        },
        error: function(res) {
          obj.attr('disabled', false);  
          ajax_error(res);
        }
      });
    });

    // Team tab
    $(document).on('click','.teamsearchicon',function(){
      let search = $('#search_field_team').val();
      if($.trim(search)!=""){
        let locationId = $('#locationId').val();
        window.location.href = APP_URL+'/backend/rentals/'+locationId+'/?name='+search+'#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();
      let studioId = $('#studioId').val();
      $.ajax({
          type: 'POST',
          dataType: 'json',
          data: {_token:_token, uuid:uuid,type:'edit',locationId:locationId,studioId:studioId},
          url: APP_URL+"/studioteaminfo",
          success: function(res) {
            if(res.status){
              $('.team-card .card-body').html(res.content);
              $('select[name="specialist[]"]').html(res.specialist_option).selectpicker('refresh');
            }
          },
          error: function(res) {                    
            ajax_error(res);
          }
      });
    });
    $(document).on('click', '#btn_saveTeam', function(){
      let obj = $(this);
      obj.attr('disabled',true);
      $.ajax({
          type: 'POST',
          dataType: 'json',
          data: $('#teamEditForm').serialize(),
          url: APP_URL+"/studio-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_team').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();
      let studioId = $('#studioId').val();
      $(this).attr('disabled', true);
      $.ajax({
          type: 'POST',
          dataType: 'json',
          data: {_token:_token, uuid:uuid, location:locationId, studio:studioId},
          url: APP_URL+"/add-team-member",
          success: function(res) {
            if(res.status){
              window.location.assign(APP_URL+'/backend/studio-list/'+locationId+'/'+studioId+'#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();
        let studioId = $('#studioId').val();
        $.ajax({
            type: 'POST',
            dataType: 'json',
            data: {_token:_token, uuid:uuid, location:locationId, studio:studioId},
            url: APP_URL+"/remove-team-member",
            success: function(res) {
              if(res.status){
                window.location.assign(APP_URL+'/backend/studio-list/'+locationId+'/'+studioId+'#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 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 %">`;
            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