@extends('Admin.layouts.app')
@section('title', 'Edit Provider Info')

@section('content')




<!-- Page Heading -->
<h1 class="h3 mb-2 text-gray-800">Edit Provider Info</h1>
<!-- DataTales Example -->
<div class="card shadow mb-4">
     <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary"><a href="{{route('admin.providers')}}"><i class="fa fa-chevron-left"></i></a>Edit Provider Info</h6>
    </div> 
  
    <div class="card-body">
      @if(Session::has('success'))
    <div class="alert alert-success">
    {{Session::get('success')}}
    </div>
    @endif

   
       <form method="post" action="{{route('admin.provider.update')}}" enctype="multipart/form-data" >@csrf 
        <input type="hidden" name="user_id" value="{{$user->id}}">
       <div class="row">
       <div class="col-sm-6">
       <div class="form-group">
    <label for="exampleFormControlInput1">Name</label>
    <input type="text" class="form-control" name="name"  id="exampleFormControlInput1" value="{{ $user->name }}" placeholder="user Name" required>
  </div>
</div>
<div class="col-sm-6">
       <div class="form-group">
    <label for="exampleFormControlInput1">Email</label>
    <input type="email" class="form-control" name="email" disabled  id="exampleFormControlInput1" placeholder="user Email" value="{{$user->email}}" required>
  </div>
  @error('email')
        <span class="text-danger">{{ $message }}</span>
    @enderror
</div>     

<div class="col-sm-6">
       <div class="form-group">
    <label for="exampleFormControlInput1">Phone</label>
    <input type="tel"  class="form-control" name="phone" disabled placeholder="Enter the rest of the number" value="{{ $user->phone }}" required>
   
  </div>
  @error('phone')
        <span class="text-danger">{{ $message }}</span>
    @enderror
</div>   
<div class="col-sm-6">
       <div class="form-group">
    <label for="exampleFormControlInput1">License Num</label>
    <input type="text"  class="form-control" name="license_num"  placeholder="Enter the license number" value="{{ $user->provider_details->license_num }}" required>
   
  </div>
  @error('license_num')
        <span class="text-danger">{{ $message }}</span>
    @enderror
</div>  

<div class="col-sm-6">
       <div class="form-group">
    <label for="exampleFormControlInput1">Experience</label>
    <input type="number"  class="form-control" name="experience"  placeholder="Enter Experience" value="{{ $user->provider_details->experience }}" required>
   
  </div>
  @error('experience')
        <span class="text-danger">{{ $message }}</span>
    @enderror
</div>  
<div class="mb-4">
    <h2>Select Booking Days</h2>
    <div class="btn-group btn-group-toggle day-toggle" data-toggle="buttons">
    @php
        $selectedDays = $user->provider_details->booking_days->pluck('day')->toArray(); 
    @endphp

    @foreach(['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] as $day)
        <label class="btn btn-outline-primary {{ in_array($day, $selectedDays) ? 'active' : '' }}">
            <input type="checkbox" name="days[]" value="{{ $day }}" 
            autocomplete="off" {{ in_array($day, $selectedDays) ? 'checked' : '' }}> 
            {{ $day }}
        </label>
    @endforeach
</div>

</div>


        <div class="mb-4">
                <h4>Select Services</h4>
                @php
        $selectedServices = $user->provider_details->provider_services->pluck('service_id')->toArray(); 
    @endphp
                <div class="btn-group btn-group-toggle service-toggle" data-toggle="buttons">
                    @foreach($services as $service)
                        <label class="btn btn-outline-primary {{ in_array($service->id, $selectedServices) ? 'active' : '' }} " >
                            <input type="checkbox" name="services[]" value="{{ $service->id }}" {{ in_array($service->id, $selectedServices) ? 'checked' : '' }} autocomplete="off"> {{ $service->name }}
                        </label>
                    @endforeach
                </div>
            </div>

     
    <div class="mb-4">
    <h4>Enter Time Slots for Each Day</h4>
    @php
      
        $selectedSlots = $user->provider_details->slots->groupBy('day')->toArray(); 
    @endphp

    @foreach(['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] as $day)
        <div class="day-container btn btn-outline-primary {{ array_key_exists($day, $selectedSlots) ? 'active' : '' }}">
            <h5>{{ $day }}</h5>

            <div id="slots-{{ strtolower($day) }}">
                @if(array_key_exists($day, $selectedSlots))
                    @foreach($selectedSlots[$day] as $slot)
                        <div class="slot-input-group">
                            <input type="time" name="slots[{{ $day }}][]" value="{{ $slot['start_time'] }}" class="form-control">
                        </div>
                    @endforeach
                @else
                    <!-- Initial empty time slot input if no time slots were selected -->
                    <div class="slot-input-group">
                        <input type="time" name="slots[{{ $day }}][]" class="form-control" >
                    </div>
                @endif
            </div>
        </div>
    @endforeach
</div>



@if($user->provider_details !=null)
                                        <div class="card-header">
        <h6 class="m-0 font-weight-bold text-primary"> Provider Documents</h6>
    </div>
                                        <div class="container mt-5">
    <div class="row">
        <div class="col-md-6 mb-4">
            <h4>Work Permit</h4>
            <img src="{{$user->provider_details->work_permit}}" class="img-fluid" alt="Provider Work Permit Image">
        </div>
        <div class="col-md-6 mb-4">
            <h4>Proof Address</h4>
            <img src="{{$user->provider_details->proof_address}}" class="img-fluid" alt="Provider Proof Address Image">
        </div>
        <div class="col-md-6 mb-4">
            <h4>CNIC/Passport</h4>
            <img src="{{$user->provider_details->identifier_image}}" class="img-fluid" alt="Provider National ID Image">
        </div>

        
        <div class="col-md-6 mb-4">
        <h4>CV</h4>
        @if ($user->provider_details->cv!=null)
    <a href="{{ route('user.downloadCv', $user->id) }}" class="btn btn-primary">
        <i class="fas fa-download"></i> Download CV
    </a>
    @else

    <p>No CV found</p>
@endif
</div>

<div class="col-md-6 mb-4">
    <h4>Certificates</h4>

    @if ($user->provider_details->certificates && count($user->provider_details->certificates) > 0)
        @foreach ($user->provider_details->certificates as $certificate)
            <div class="certificate-item mb-2">
                <!-- Certificate name -->
                <p>{{ $certificate->name }}</p>

                <!-- Download button -->
                <a href="{{ route('user.downloadCertificate', ['id' => $user->id, 'certificate_id' => $certificate->id]) }}" class="btn btn-primary">
                    <i class="fas fa-download"></i> Download Certificate
                </a>

                <!-- Delete button -->
                <form action="{{ route('user.deleteCertificate', ['id' => $user->id, 'certificate_id' => $certificate->id]) }}" method="POST" style="display:inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash"></i> Delete Certificate
                    </button>
                </form>
            </div>
        @endforeach
    @else
        <p>No certificates found</p>
    @endif
</div>

       
    </div>
</div>
         @endif                         



     

            <div class="row">
            <div class="col-sm-4">
  <div class="form-group">
    <label>Upload Work Permit Image</label>
    
    <img src="#" id="show_work_permit_image" class="img-fluid" width="120">
    <label for="work_permit_image" style='cursor:pointer;'>
      <img src="{{asset('admin/img/icon.png')}}" id="old_work_permit_image" class="img-fluid">
    </label>
    <br>
    <div class="d-none">
      <input type="file" id="work_permit_image" name="work_permit_image" accept="image/*">
    </div>
  </div>
</div>

<div class="col-sm-4">
  <div class="form-group">
    <label>Upload Proof Address Image</label>
    
    <img src="#" id="show_proof_address_image" class="img-fluid" width="120">
    <label for="proof_address_image" style='cursor:pointer;'>
      <img src="{{asset('admin/img/icon.png')}}" id="old_proof_address_image" class="img-fluid">
    </label>
    <br>
    <div class="d-none">
      <input type="file" id="proof_address_image" name="proof_address_image" accept="image/*">
    </div>
  </div>
</div>

</div>





<div class="row">
            <div class="col-sm-4">
  <div class="form-group">
    <label>Upload Natiobal ID Image</label>
   
    <img src="#" id="show_id_image" class="img-fluid" width="120">
    <label for="id_image" style='cursor:pointer;'>
      <img src="{{asset('admin/img/icon.png')}}" id="old_id_image" class="img-fluid">
    </label>
    <br>
    <div class="d-none">
      <input type="file" id="id_image" name="id_image" accept="image/*">
    </div>
  </div>
</div>

<div class="col-sm-4">
  <div class="form-group">
    <label>Upload CV</label>
    
    <label for="cv" style='cursor:pointer;'>
      <img src="{{asset('admin/img/icon.png')}}" id="old_cv" class="img-fluid" alt="Upload Icon">
    </label>
    <br>
    <div class="d-none">
      <input type="file" id="cv" name="cv" accept="application/pdf">
    </div>
  </div>
</div>

</div>
<div class="col-lg-12 mt-3">
       <div class="form-group">
        <button  class="btn-gazna" style="height:50px;font-size:14px;" type="submit">Update</button>
</div>
</div>
</div>
</form>
    </div>
</div>

</div>
<!-- /.container-fluid -->
 @endsection
    <!-- End of Main Content -->

    @push('body-scripts')
    <script>
 $(function(){
        $('#show_work_permit_image').hide();
        $('#show_proof_address_image').hide();
        $('#show_id_image').hide();
        $('#showimg3').hide();
        $('#showimg4').hide();
    });
    function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            // $('#oldimg').hide();
            $('#show_work_permit_image').show();
            $('#show_work_permit_image').attr('src', e.target.result);
          
        }
        reader.readAsDataURL(input.files[0]);
    }
}
function readURL2(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            // $('#oldimg').hide();
            $('#show_proof_address_image').show();
            $('#show_proof_address_image').attr('src', e.target.result);
          
        }
        reader.readAsDataURL(input.files[0]);
    }
}
function readURL3(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            // $('#oldimg').hide();
            $('#show_id_image').show();
            $('#show_id_image').attr('src', e.target.result);
          
        }
        reader.readAsDataURL(input.files[0]);
    }
}
function readURL4(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            // $('#oldimg').hide();
            $('#showimg4').show();
            $('#showimg4').attr('src', e.target.result);
          
        }
        reader.readAsDataURL(input.files[0]);
    }
}
    $('#work_permit_image').on('change',function(){
        readURL(this);
    });
    $('#proof_address_image').on('change',function(){
        readURL2(this);
    });
    $('#id_image').on('change',function(){
        readURL3(this);
    });
    $('#img4').on('change',function(){
        readURL4(this);
    });
    </script>
<script>
   $(document).ready(function() {
  $('.toggle-password').click(function() {
    $(this).toggleClass('active');
    var input = $(this).parent().prev();
    if (input.attr('type') === 'password') {
      input.attr('type', 'text');
    } else {
      input.attr('type', 'password');
    }
  });
});

  </script>

<script>
    document.getElementById('cv').addEventListener('change', function() {
    if (this.files && this.files[0]) {
      document.getElementById('old_cv').src = "{{asset('admin/img/small_document_icon.png')}}";
    }
  });
    
</script>
@endpush