@extends('backend.layouts.app')

@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
      <ol class="breadcrumb">
        <li>
          <a href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_664_24080)">
              <path d="M7.5 13.5L10.5 13.5" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M1.76354 9.91009C1.49878 8.18718 1.3664 7.32573 1.69212 6.56203C2.01785 5.79834 2.74052 5.27582 4.18585 4.2308L5.26574 3.45C7.06372 2.15 7.96271 1.5 9 1.5C10.0373 1.5 10.9363 2.15 12.7343 3.45L13.8141 4.2308C15.2595 5.27582 15.9821 5.79834 16.3079 6.56203C16.6336 7.32573 16.5012 8.18718 16.2365 9.91009L16.0107 11.3793C15.6353 13.8217 15.4477 15.0429 14.5717 15.7714C13.6958 16.5 12.4152 16.5 9.85411 16.5H8.14589C5.58475 16.5 4.30418 16.5 3.42825 15.7714C2.55232 15.0429 2.36465 13.8217 1.98932 11.3793L1.76354 9.91009Z" stroke="#007AFF" stroke-width="1.5" stroke-linejoin="round"/>
              </g>
              <defs>
              <clipPath id="clip0_664_24080">
              <rect width="18" height="18" fill="white"/>
              </clipPath>
              </defs>
            </svg>
          </a>
        </li>
        <li>
          <a href="{{ route('superadmin.customers.index') }}">{{__('app.customers.title')}}</a>
        </li>
        <li class="active title step-1-breadcrumb">{{$title}}</li>
        <li class="step-2-breadcrumb" style="display: none;">
          <a href="#">{{__('app.add')}} {{__('app.customers.customer')}}</a>
        </li>
        <li class="active title step-2-breadcrumb" style="display: none;">{{__('app.add')}} {{__('app.documents')}}</li>
      </ol>
      <div class="d-flex justify-content-between align-items-center flex-wrap">
        <h1 class="title">{{$title}}</h1>
        @if (!isset($customer))
          <div class="d-flex justify-content-between align-items-center flex-wrap">
            <div class="d-flex align-items-center step-1 step-active pe-89 step-line position-relative">
              <div >
                <svg class="step-noraml-icon" width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="3.38379" y="3.88367" width="24.2326" height="24.2326" rx="8.5" stroke="#D1D1D6"/>
                <rect x="10.093" y="10.593" width="10.814" height="10.814" rx="4" fill="#D1D1D6"/>
                </svg>

                <svg class="step-previous-icon" width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="2.88379" y="3.38367" width="25.2326" height="25.2326" rx="9" fill="#34C759"/>
                <mask id="mask0_667_26123" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="7" width="18" height="19">
                <rect x="7" y="7.5" width="18" height="18" fill="#D9D9D9"/>
                </mask>
                <g mask="url(#mask0_667_26123)">
                <path d="M14.1623 18.8625L20.5185 12.5063C20.6685 12.3563 20.8435 12.2812 21.0435 12.2812C21.2435 12.2812 21.4185 12.3563 21.5685 12.5063C21.7185 12.6563 21.7935 12.8344 21.7935 13.0406C21.7935 13.2469 21.7185 13.425 21.5685 13.575L14.6873 20.475C14.5373 20.625 14.3623 20.7 14.1623 20.7C13.9623 20.7 13.7873 20.625 13.6373 20.475L10.4123 17.25C10.2623 17.1 10.1904 16.9219 10.1967 16.7156C10.2029 16.5094 10.281 16.3313 10.431 16.1813C10.581 16.0313 10.7592 15.9563 10.9654 15.9563C11.1717 15.9563 11.3498 16.0313 11.4998 16.1813L14.1623 18.8625Z" fill="white"/>
                </g>
                </svg>


              </div>
              <div class="ms-2">
                <div class="fs-12 text-8E8E93">{{__('app.step_1')}}</div>
                <div class="fs-13 fw-semibold step-not-active">{{__('app.basic_details')}}</div>
              </div>
            </div>
            <div class="d-flex align-items-center ">
              <div class="step-2">
                <svg class="step-noraml-icon" width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="3.38379" y="3.88367" width="24.2326" height="24.2326" rx="8.5" stroke="#D1D1D6"/>
                <rect x="10.093" y="10.593" width="10.814" height="10.814" rx="4" fill="#D1D1D6"/>
                </svg>

                <svg class="step-previous-icon" width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="2.88379" y="3.38367" width="25.2326" height="25.2326" rx="9" fill="#34C759"/>
                <mask id="mask0_667_26123" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="7" width="18" height="19">
                <rect x="7" y="7.5" width="18" height="18" fill="#D9D9D9"/>
                </mask>
                <g mask="url(#mask0_667_26123)">
                <path d="M14.1623 18.8625L20.5185 12.5063C20.6685 12.3563 20.8435 12.2812 21.0435 12.2812C21.2435 12.2812 21.4185 12.3563 21.5685 12.5063C21.7185 12.6563 21.7935 12.8344 21.7935 13.0406C21.7935 13.2469 21.7185 13.425 21.5685 13.575L14.6873 20.475C14.5373 20.625 14.3623 20.7 14.1623 20.7C13.9623 20.7 13.7873 20.625 13.6373 20.475L10.4123 17.25C10.2623 17.1 10.1904 16.9219 10.1967 16.7156C10.2029 16.5094 10.281 16.3313 10.431 16.1813C10.581 16.0313 10.7592 15.9563 10.9654 15.9563C11.1717 15.9563 11.3498 16.0313 11.4998 16.1813L14.1623 18.8625Z" fill="white"/>
                </g>
                </svg>
              </div>
              <div class="ms-2">
                <div class="fs-12 text-8E8E93">{{__('app.step_2')}}</div>
                <div class="fs-13 fw-semibold step-not-active">{{__('app.documents')}}</div>
              </div>
            </div>
          </div>
        @endif
        
      </div>
  
    </section>
    <!-- Main content -->
    <section class="content pb-0">
    @include('backend.layouts.alert')
      <!-- Default box -->
      <div class="row">
        <div class="col-md-12">

          <div class="border-top">
              
            <div class="" id="customer-step-1"> 
              <form action="{{ $save }}" method="POST" class="form-horizontal customer-form-validate" enctype="multipart/form-data" id="customerForm">
                @csrf
                @if(isset($customer))
                  @method('PUT')
                @endif
                <input type="hidden" name="id" value="{{ isset($customer) ? $customer->id : '' }}" id="scret_id">
            
                <div class="box-body px-0 form-box-scroll">
                  <div class="row">
            
                    {{-- Name --}}
                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="name" class="control-label">{{__('app.customers.name')}}</label>
                        <div class="col-field-wrapper">
                          <input type="text" name="name" class="form-control" id="name" placeholder="Enter customer name" value="{{ isset($customer) ? $customer->name : old('name') }}">
                          <span class="help-block text-danger" id="error-name"></span>
                        </div>
                      </div>
                    </div>

                    {{-- Address --}}
                    <div class="col-md-8">
                      <div class="form-group">
                        <label for="address" class="control-label">{{__('app.customers.address')}}</label>
                        <div class="col-field-wrapper">
                          <input type="text" name="address" class="form-control" id="address" placeholder="Enter address" value="{{ isset($customer) ? $customer->address : old('address') }}">
                          <span class="help-block text-danger" id="error-address"></span>
                        </div>
                      </div>
                    </div>
            
                    {{-- Contact Person (Accounts) --}}
                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="contact_person_accounts" class="control-label">{{__('app.customers.contact_person')}} ({{__('app.customers.accounts')}})</label>
                        <div class="col-field-wrapper">
                          <input type="text" name="contact_person_accounts" class="form-control" id="contact_person_accounts" placeholder="Enter contact person name" value="{{ isset($customer) ? $customer->contact_person_accounts : old('contact_person_accounts') }}">
                          <span class="help-block text-danger" id="error-contact_person_accounts"></span>
                        </div>
                      </div>
                    </div>

                    {{-- Email (Accounts) --}}
                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="email_accounts" class="control-label">{{__('app.customers.email')}} ({{__('app.customers.accounts')}})</label>
                        <div class="col-field-wrapper">
                          <input type="email" name="email_accounts" class="form-control" id="email_accounts" placeholder="Enter email" value="{{ isset($customer) ? $customer->email : old('email') }}">
                          <span class="help-block text-danger" id="error-email_accounts"></span>
                        </div>
                      </div>
                    </div>

                    {{-- Phone (Accounts) --}}
                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="phone_accounts" class="control-label">{{__('app.customers.phone')}} ({{__('app.customers.accounts')}})</label>
                        <div class="col-field-wrapper">
                          <input type="text" name="phone_accounts" class="form-control" id="phone_accounts" placeholder="Enter phone number" value="{{ isset($customer) ? $customer->phone_accounts : old('phone_accounts') }}">
                          <span class="help-block text-danger" id="error-phone_accounts"></span>
                        </div>
                      </div>
                    </div>

                    {{-- Contact Person (Operations) --}}
                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="contact_person_operations" class="control-label">{{__('app.customers.contact_person')}} ({{__('app.customers.operations')}})</label>
                        <div class="col-field-wrapper">
                          <input type="text" name="contact_person_operations" class="form-control" id="contact_person_operations" placeholder="Enter contact person name" value="{{ isset($customer) ? $customer->contact_person_operations : old('contact_person_operations') }}">
                          <span class="help-block text-danger" id="error-contact_person_operations"></span>
                        </div>
                      </div>
                    </div>

                    {{-- Email (Operations) --}}
                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="email_operations" class="control-label">{{__('app.customers.email')}} ({{__('app.customers.operations')}})</label>
                        <div class="col-field-wrapper">
                          <input type="email" name="email_operations" class="form-control" id="email_operations" placeholder="Enter email" value="{{ isset($customer) ? $customer->email_operations : old('email_operations') }}">
                          <span class="help-block text-danger" id="error-email_operations"></span>
                        </div>
                      </div>
                    </div>

                    {{-- Phone (Operations) --}}
                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="phone_operations" class="control-label">{{__('app.customers.phone')}} ({{__('app.customers.operations')}})</label>
                        <div class="col-field-wrapper">
                          <input type="text" name="phone_operations" class="form-control" id="phone_operations" placeholder="Enter phone number" value="{{ isset($customer) ? $customer->phone_operations : old('phone_operations') }}">
                          <span class="help-block text-danger" id="error-phone_operations"></span>
                        </div>
                      </div>
                    </div>

                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="customer_type_id" class="control-label">{{__('app.customers.type_of_account')}}</label>
                        <div class="col-field-wrapper">
                          <select name="customer_type_id" class="form-control" id="customer_type_id">
                            <option value="">Select</option>
                    
                            @foreach ($customerTypes as $customerType)
                              <option value="{{$customerType->id}}" {{ isset($customer) && $customer->customer_type_id == $customerType->id ? 'selected' : '' }}>{{$customerType->name}}</option>
                            @endforeach
                          </select>
                          <span class="help-block text-danger" id="error-customer_type_id"></span>
                        </div>
                      </div>
                    </div>
                    

                    @if (isset($customer))
                      <div class="col-md-12 mt-3">
                        <div class="row">
                          <div class="col-xl-4 col-md-12 col-lg-7">
                            <div class="form-group">
                              <label for="description" class="control-label col-md-5 fw-semibold text-color-2D3648">{{__('app.status')}}</label>
                              <div class="col-field-wrapper col-md-7">
                                <div class="form-check-group">
                                  <div class="d-flex justify-content-xl-start gap-4">
                                    <label class="custom-radio">
                                      <input type="radio" name="status" value="1" {{ isset($customer) && $customer->status_label == 'active' ? 'checked' : '' }}>
                                      <span>{{__('app.active')}}</span>
                                    </label>
                                    <label class="custom-radio">
                                      <input type="radio" name="status" value="0" {{ isset($customer) && $customer->status_label == 'inactive' ? 'checked' : '' }}>
                                      <span>{{__('app.inactive')}}</span>
                                    </label>
                                  </div>
                                  <span class="help-block text-danger mt-1 d-block" id="error-status"></span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    @endif
            
                  </div>
                </div>
            
                {{-- Footer Buttons --}}
                <div class="box-footer px-0">
                  <div class="col-sm-12 text-end">
                    <a href="{{ $backBtnLink }}" class="btn btn-outline-secondary me-3">{{__('app.cancel')}}</a>
                    @if (isset($customer))
                        <button type="submit" class="btn btn-primary save-btn">{{__('app.save')}}</button>
                    @else
                        <button type="submit" class="btn btn-primary next-btn">{{__('app.next')}}</button>
                    @endif
                  </div>
                </div>
            
              </form>
            </div>
            

            @if (!isset($customer))
              <div id="customer-step-2" style="display:none;">
                <div class="box-body  px-0  form-box-scroll">
                    <div class="align-items-center d-flex justify-content-between mb-3">
                      <h2 class="fs-24 fw-semibold text-black">{{__('app.documents')}}</h2>
                      <a href="" class="upload-doc-btn"><button class="btn  btn-primary "><em class="iconsax" icon-name="upload-2"></em> {{__('app.upload_document')}}</button></a>
                    </div>
      
                    <table class="table table-bordered table-hover" id="tbl-users" aria-describedby="customer-list">
                      <thead>
                        <th scope="col">{{__('app.documents')}}</th>
                        <th scope="col">{{__('app.expiry')}}</th>
                        <th scope="col">{{__('app.uploaded_by')}}</th>
                        <th scope="col">{{__('app.created_date_time')}}</th>
                        <th scope="col" class="status">{{__('app.status')}}</th>
                        <th scope="col" class="action">{{__('app.action')}}</th>
                      </thead>
                      <tbody>
                        @if(isset($customer))
                          @foreach ($customer->documents as $document)
                            <tr>
                              <td data-type='text'><a href="{{ route('superadmin.customer.documents.show', ['customer' => $customer->id, 'document' => $document->id]) }}" target="_blank">{{$document->mandatoryDocument->name ?? null }}</a></td>
                              <td data-type='text'>{{$document->expiry_date?->format('m/d/Y')}}</td>
                              <td data-type='text'>{{$document->uploadedBy->name ?? null}}</td>
                              <td data-type='text'>{{$document->uploaded_date_time?->format('m/d/Y, h:i A')}}</td>
                              @php
                                $isExpired = $document->expiry_date
                                  ? \Carbon\Carbon::parse($document->expiry_date)->lt(\Carbon\Carbon::today())
                                  : '';
                              @endphp
                              <td data-type='text'>
                                @if($isExpired)<span class="px-3 py-2 rounded-5 text-danger fs-12 fw-medium tag-expired custom-width-90 text-center d-inline-block">Expired</span> 
                                @else <span class="px-3 py-2 rounded-5 text-success fs-12 fw-medium tag-active custom-width-90 text-center d-inline-block">Active</span>
                                @endif
                              </td>
                              
                              <td data-type='none'>
                                <a href="{{ route('superadmin.customer.documents.show', ['customer' => $customer->id, 'document' => $document->id]) }}" target="_blank" class="view-docs-btn me-3">
                                  <em class="iconsax icon-292D32 fs-20" icon-name="eye"></em>
                                </a>
                                @if ($document->mandatoryDocument->required == false)
                                  <a href="javascript:void(0)" class="delete-document" data-document-id="{{$document->id}}" data-customer-id="{{$customer->id}}">
                                  <em class="iconsax icon-292D32 fs-20" icon-name="trash"></em>
                                @endif

                                </a>
                              </td>
                            </tr>
                          @endforeach
                        @endif
                        @if(isset($customerDoc))
                          @foreach ($customerDoc->documents as $document)
                            <tr>
                              <td data-type='text'><a href="{{ route('superadmin.customer.documents.show', ['customer' => $customerDoc->id, 'document' => $document->id]) }}" target="_blank">{{$document->mandatoryDocument->name ?? null}}</a></td>
                              <td data-type='text'>{{$document->expiry_date?->format(APP_DATE_FORMAT)}}</td>
                              <td data-type='text'>{{$document->uploadedBy->name ?? null}}</td>
                              <td data-type='text'>{{$document->created_at?->format(APP_DATE_FORMAT.', h:i A')}}</td>
                              @php
                                $isExpired = isset($document->expiry_date) ? \Carbon\Carbon::parse($document->expiry_date)->lt(\Carbon\Carbon::today()) : '';
                              @endphp
                              <td data-type='text'>
                                @if($isExpired)<span class="px-3 py-2 rounded-5 text-danger fs-12 fw-medium tag-expired custom-width-90 text-center d-inline-block">Expired</span> 
                                @else <span class="px-3 py-2 rounded-5 text-success fs-12 fw-medium tag-active custom-width-90 text-center d-inline-block">Active</span>
                                @endif
                              </td>
                              
                              <td data-type='none'>
                                <a href="{{ route('superadmin.customer.documents.show', ['customer' => $customerDoc->id, 'document' => $document->id]) }}" target="_blank" class="view-docs-btn me-3">
                                  <em class="iconsax icon-292D32 fs-20" icon-name="eye"></em>
                                </a>
                                  <a href="javascript:void(0)" class="delete-document" data-document-id="{{$document->id ?? null}}" data-customer-id="{{$customerDoc->id ?? null}}">
                                    <em class="iconsax icon-292D32 fs-20" icon-name="trash"></em>
                                  </a>
                              </td>
                            </tr>
                          @endforeach
                        @endif
                      </tbody>
                    </table>
                </div>
                <div class="box-footer px-0">    
                  <div class="col-sm-12 text-end">
                    <a href="{{ $backBtnLink }}" class="btn btn-outline-secondary me-3">{{__('app.cancel')}}</a>
                    <button type="button" class="btn btn-primary save-doc-btn">
                      {{__('app.save')}}
                    </button>
                  </div>
                </div>
              </div>
            @endif
              
          </div>
        </div>
      </div>

    </section>
    <!-- /.content -->

    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="staticBackdropLabel">{{__('app.missing_required_documents')}}</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-describedby="Close"></button>
          </div>
          <div class="modal-body">  
            <h5 class="mb-3">{{__('app.please_upload_all_the_mandatory_documents_before_activating_this_customer')}}</h5>
            <ul id="missingDocumentsList" class="list-unstyled">
              <!-- Documents will be populated dynamically -->
            </ul>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">{{__('app.ok')}}</button>
          </div>
        </div>
      </div>
    </div>

<script type="text/javascript">
$(document).ready(function () {

    const urlParams = new URLSearchParams(window.location.search);
    const showStep = urlParams.get('showStep');
    const customerId = urlParams.get('id');

    if (showStep === '2') {
        $('#customer-step-1').hide();
        $('#customer-step-2').show();
        $('.step-1').removeClass('step-active').addClass('step-previous');
        $('.step-2').removeClass('step-not-active').addClass('step-active');

        // Update breadcrumb for step 2
        $('.step-1-breadcrumb').hide();
        $('.step-2-breadcrumb').show();

        // Optionally, update the upload link with the real customer ID
        if (customerId) {
            var uploadUrl = "{{ route('superadmin.customer.documents.create', [':id']) }}";
            uploadUrl = uploadUrl.replace(':id', customerId) + '?from=add-customer';
            $('.upload-doc-btn').attr('href', uploadUrl);
        }
    }
    // Initialize form validation
    var $form = $('#customerForm');
    
    if ($form.length) {
        // Remove any existing validation
        $form.removeData('validator');
        $form.removeData('unobtrusiveValidation');

        // Initialize validation
        $form.validate({
              debug: true,
              ignore: ":hidden", // Ignore all hidden inputs
              errorClass: 'help-block',
              errorElement: "span",
              onkeyup: false,
              onfocusout: false,
              onclick: false,

              rules: {
                  name: {
                      required: true,
                      minlength: 2,
                      maxlength: 255
                  },
                  contact_person_accounts: {
                      required: true,
                      minlength: 2,
                      maxlength: 255
                  },
                  email_accounts: {
                      required: true,
                      email: true,
                      maxlength: 255
                  },
                  phone_accounts: {
                      required: true,
                      minlength: 9,
                      maxlength: 15
                  },
                  contact_person_operations: {
                      required: true,
                      minlength: 2,
                      maxlength: 255
                  },
                  email_operations: {
                      required: true,
                      email: true,
                      maxlength: 255
                  },
                  phone_operations: {
                      required: true,
                      minlength: 9,
                      maxlength: 15
                  },
                  address: {
                      required: true
                  },
                  customer_type_id: {
                      required: true
                  }
              },

              messages: {
                  name: {
                      required: "Please enter the customer name",
                      minlength: "Name must be at least 2 characters long",
                      maxlength: "Name cannot exceed 255 characters"
                  },
                  contact_person_accounts: {
                      required: "Please enter the contact person (Accounts)",
                      minlength: "Must be at least 2 characters",
                      maxlength: "Cannot exceed 255 characters"
                  },
                  email_accounts: {
                      required: "Please enter an email (Accounts)",
                      email: "Please enter a valid email",
                      maxlength: "Email cannot exceed 255 characters"
                  },
                  phone_accounts: {
                      required: "Please enter a phone number (Accounts)",
                      minlength: "Phone number (Accounts) must be at least 9 digits",
                      maxlength: "Phone number (Accounts) cannot exceed 15 digits"
                  },
                  contact_person_operations: {
                      required: "Please enter the contact person (Operations)",
                      minlength: "Must be at least 2 characters",
                      maxlength: "Cannot exceed 255 characters"
                  },
                  email_operations: {
                      required: "Please enter an email (Operations)",
                      email: "Please enter a valid email",
                      maxlength: "Email cannot exceed 255 characters"
                  },
                  phone_operations: {
                      required: "Please enter a phone number (Operations)",
                      minlength: "Phone number (Operations) must be at least 9 digits",
                      maxlength: "Phone number (Operations) cannot exceed 15 digits"
                  },
                  address: {
                      required: "Please enter the address"
                  },
                  customer_type_id: {
                      required: "Please select the customer type"
                  }
              },

              highlight: function (element, errorClass, validClass) {
                  $(element).closest('.col-field-wrapper').addClass('has-error');
              },
              unhighlight: function (element, errorClass, validClass) {
                  $(element).closest('.col-field-wrapper').removeClass('has-error');
              },
              invalidHandler: function (form, validator) {
                  if (!validator.numberOfInvalids()) return;
                  $('html, body').animate({
                      scrollTop: ($(validator.errorList[0].element).offset().top - 100)
                  }, 500);
              },
              errorPlacement: function (error, element) {
                  if (element.attr("name") === "type_of_account") {
                      element.closest('.form-check-group').append(error);
                  } else {
                      error.insertAfter(element);
                  }
              }
        });


        // Handle form submission
        $('.next-btn, .save-btn').on('click', function(e) {
          e.preventDefault();

          if ($form.valid()) {
            var $submitBtn = $(this);
            var isEditMode = $submitBtn.hasClass('save-btn');
            var originalText = $submitBtn.html();

            // Show loading state
            $submitBtn.prop('disabled', true).html('<em class="fa fa-spinner fa-spin"></em> Saving...');

            // Prepare form data
            var formData = new FormData($form[0]);

            $.ajax({
              url: $form.attr('action'),
              type: 'POST',
              data: formData,
              headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              },
              processData: false,
              contentType: false,
              success: function(response) {
                if (response.success) {
                  if (isEditMode) {
                    toastr.success(response.message || 'Success!');
                    setTimeout(function() {
                        window.location.href = response.redirect;
                    }, 1500);
                  } else {
                    var customerId = response.customerId;
                    $('#scret_id').val(customerId);
                    var uploadUrl = "{{ route('superadmin.customer.documents.create', [':id']) }}";
                    uploadUrl = uploadUrl.replace(':id', customerId) + '?from=add-customer';
                    $('.upload-doc-btn').attr('href', uploadUrl);
                    
                    // Update breadcrumb for step 2
                    $('.step-1-breadcrumb').hide();
                    $('.step-2-breadcrumb').show();
                    $('.step-1').removeClass('step-active').addClass('step-previous');
                    $('.step-2').removeClass('step-not-active').addClass('step-active');
                    $('#customer-step-1').hide();
                    $('#customer-step-2').show();

                  }
                } else {
                  toastr.error(response.message);
                }

                $submitBtn.prop('disabled', false).html(originalText);
              },

              error: function(xhr) {
                if (xhr.status === 422) {
                  // Clear previous error states
                  $form.find('.col-field-wrapper, .position-relative').removeClass('has-error');
                  $form.find('.help-block').remove();

                  // Server-side validation errors
                  var errors = xhr.responseJSON.errors;

                  $.each(errors, function(field, messages) {
                    // Optional mapping if needed
                    var fieldMapping = {
                      'email': 'email_accounts',
                      'email_operations': 'email_operations',
                      // Add more mappings if necessary
                    };

                    var formFieldName = fieldMapping[field] || field;
                    var $fieldElement = $form.find('[name="' + formFieldName + '"]');

                    if ($fieldElement.length) {
                      var $wrapper = $fieldElement.closest('.col-field-wrapper, .position-relative');
                      if ($wrapper.length) {
                        $wrapper.addClass('has-error');
                        $wrapper.append('<span class="help-block text-danger">' + messages[0] + '</span>');
                      }
                    }
                  });

                  // Scroll to the first error
                  var $firstError = $form.find('.has-error').first();
                  if ($firstError.length) {
                    $('html, body').animate({ scrollTop: $firstError.offset().top - 100 }, 500);
                  }
                } else {
                  toastr.error('An error occurred while saving the data.');
                }

                $submitBtn.prop('disabled', false).html(originalText);
              }
            });
          }
        });
      }

    // Handle status radio button validation for edit mode
    @if(isset($customer))
    $('input[name="status"]').on('change', function() {
      const selectedStatus = $(this).val();
      const customerId = $('#scret_id').val();
      
      // If selecting active status, check documents first
      if (selectedStatus === '1') {
        // Temporarily prevent the radio button change
        const $activeRadio = $(this);
        const $inactiveRadio = $('input[name="status"][value="0"]');
        
        // Store current state
        const wasChecked = $activeRadio.prop('checked');
        
        checkDocumentsBeforeActivation(customerId, $activeRadio, $inactiveRadio);
      }
    });

    // Function to check documents before activation
    function checkDocumentsBeforeActivation(customerId, $activeRadio, $inactiveRadio) {
      $.ajax({
        url: "{{ route('superadmin.customer.check-documents-and-send-credentials') }}",
        type: 'POST',
        data: {
          customer_id: customerId,
          _token: "{{ csrf_token() }}"
        },
        success: function(response) {
          if (response.success) {
            // All documents uploaded, allow active selection
            toastr.success('All required documents are uploaded. Customer can be activated.');
          } else if (response.hasMissingDocuments) {
            // Show modal with missing documents and revert to inactive
            showMissingDocumentsModal(response.missingDocuments);
            $inactiveRadio.prop('checked', true);
            $activeRadio.prop('checked', false);
          } else {
            $inactiveRadio.prop('checked', true);
            $activeRadio.prop('checked', false);
            toastr.error(response.message || 'Failed to check documents');
          }
        },
        error: function(xhr) {
          $inactiveRadio.prop('checked', true);
          $activeRadio.prop('checked', false);
          let errorMessage = 'An error occurred while checking documents';
          if (xhr.responseJSON && xhr.responseJSON.message) {
            errorMessage = xhr.responseJSON.message;
          }
          toastr.error(errorMessage);
        }
      });
    }

    // Function to show missing documents modal
    function showMissingDocumentsModal(missingDocuments) {
      let documentsList = '';
      missingDocuments.forEach(function(doc) {
        documentsList += '<li>• ' + doc + '</li>';
      });
      
      $('#missingDocumentsList').html(documentsList);
      $('#missingDocumentsModal').modal('show');
    }
    @endif

    // Add filesize validation method
    $.validator.addMethod('filesize', function (value, element, arg) {
        if(element.files[0].size<=arg){
            return true;
        }else{
            return false;
        }
    });

    // Input mask for phone number
    $('[data-mask]').inputmask();
    
    // Handle image file
    var $imageRequired = $("#image_required");
    if($imageRequired.length && !$imageRequired.val().length > 0) {
        $('.image-file-remove').hide(); 
    }

    $('.image-file-remove').on('click', function(){
        $('#img-file-upload').val('');
        $('.image-file-upload-again').remove();
        $('#image_required').val('');
        $('.image-file-remove').hide();
        $('.image-container').find('img').attr('src', defaultImageForAdmin);
        $('#image-data').val('');
    });

    $('.delete-document').on('click', function(e) {
        e.preventDefault(); // Prevent default anchor behavior
        
        const customerId = $(this).data('customer-id');
        const documentId = $(this).data('document-id');
        const row = $(this).closest('tr');

        // Get customer ID from URL or hidden input if not available from data attribute
        let finalCustomerId = customerId;
        if (!finalCustomerId) {
            finalCustomerId = $('#scret_id').val();
            if (!finalCustomerId) {
                const urlParams = new URLSearchParams(window.location.search);
                finalCustomerId = urlParams.get('id');
            }
        }

        if (!finalCustomerId || !documentId) {
            toastr.error('Missing required information for deletion');
            return;
        }

        // SweetAlert confirmation dialog
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                var deleteUrl = "{{ route('superadmin.customer.documents.destroy', [':customer', ':document']) }}?from=add";
                deleteUrl = deleteUrl.replace(':customer', finalCustomerId).replace(':document', documentId);
                
                $.ajax({
                    url: deleteUrl,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.status === 'success') {
                            row.remove();
                            toastr.success(response.message || 'Document deleted successfully');
                            setTimeout(function() {
                                // Optionally reload or update UI here if needed
                            }, 1000);
                        } else {
                            toastr.error(response.message || 'Failed to delete document');
                        }
                    },
                    error: function(xhr) {
                        console.error('Delete error:', xhr);
                        let errorMessage = 'Failed to delete document';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }
                        toastr.error(errorMessage);
                    }
                });
            }
        });
    });

    // Handle save-doc-btn click
    $('.save-doc-btn').on('click', function(e) {
        e.preventDefault();
        
        // Get customer ID from URL or hidden input
        const urlParams = new URLSearchParams(window.location.search);
        let customerId = urlParams.get('id');
        console.log(customerId);
        
        if (!customerId) {
            // Try to get from hidden input if available
            customerId = $('#scret_id').val();
        }
        
        const $btn = $(this);
        const originalText = $btn.html();
        
        // Show loading state
        $btn.prop('disabled', true).html('<em class="fa fa-spinner fa-spin"></em> Checking...');
        
        // Send AJAX request to check documents and send credentials
        $.ajax({
            url: "{{ route('superadmin.customer.check-documents-and-send-credentials') }}",
            type: 'POST',
            data: {
                customer_id: customerId,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    // All documents uploaded, credentials sent
                    toastr.success(response.message);
                    setTimeout(function() {
                        window.location.href = response.redirect;
                    }, 2000);
                } else if (response.hasMissingDocuments) {
                    // Show modal with missing documents
                    showMissingDocumentsModal(response.missingDocuments);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                let errorMessage = 'An error occurred while checking documents';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                toastr.error(errorMessage);
            },
            complete: function() {
                $btn.prop('disabled', false).html(originalText);
            }
        });
    });
    
    // Function to show missing documents modal
    function showMissingDocumentsModal(missingDocuments) {
        let documentsList = '';
        missingDocuments.forEach(function(doc) {
            documentsList += '<li>• ' + doc + '</li>';
        });
        
        $('#missingDocumentsList').html(documentsList);
        
        // Update upload button href if customer ID is available
        const urlParams = new URLSearchParams(window.location.search);
        const customerId = urlParams.get('id');
        if (customerId) {
            var uploadUrl = "{{ route('superadmin.customer.documents.create', [':id']) }}";
            uploadUrl = uploadUrl.replace(':id', customerId) + '?from=add-customer';
            $('.upload-doc-btn').attr('href', uploadUrl);
        }
        
        $('#staticBackdrop').modal('show');
    }
});

// Initialize DataTable
$(document).ready(function() {
    var $table = $('#tbl-users');
    if ($table.length) {
        $.fn.dataTable.ext.errMode = () => alert('{{__("messages.datatable_error_message")}}');
        var table = $table.DataTable({
            info: true,
            searching: true,
            pageLength: 10,
            pagingType: "full_numbers",
            dom: 'frt<"bottom"ipl><"clear">',
            columnDefs: [
              { targets: ['status', 'action'], orderable: false }
            ],
        });
        
        $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');

        $('#tbl-users_filter').append(`
            <select id="statusFilter" class="form-control max-w-200 ms-2">
              <option value="">Status</option>
              <option value="Active">Active</option>
              <option value="Expired">Expired</option>
            </select>
        `);
            
        // Filter on change
        $('#statusFilter').on('change', function () {
            let selected = $(this).val();
            table.column(4).search(selected).draw(); // column index 4 = "Status"
        });
        
        $('#calendar').datepicker();
    }
});
</script>
@endsection