@extends('backend.layouts.admin.app')

@section('content')
@include('backend.layouts.alert')
<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('transporter.drivers.index') }}">{{__('app.drivers.title')}}</a></li>
    <li class="active">{{$title}}</li>
  </ol>
  <div class="d-flex justify-content-between align-items-center flex-wrap">
    <h1>{{ $title }}</h1>
  </div>
</section>
<section class="content pb-0">
  <div class="row">
    <div class="col-md-12">
      <div class="border-top">
        <form action="{{ $save }}" method="POST" class="form-horizontal form-validate" enctype="multipart/form-data">
          @csrf
          <input type="hidden" name="driver" value="{{ request()->route('driver') }}">
          <input type="hidden" name="source" value="{{ request()->get('from') }}">

          <div class="box-body px-0 form-box-scroll">
            <div class="mx-auto custom-max-width-354">
              <div class="row">
                <div class="col-md-12">
                  <div class="form-group">
                    <label for="title" class="control-label">Type of Document</label>
                    <div class="col-field-wrapper">
                      <select id="type_of_document" class="form-control" name="type_of_document">
                        <option value="">Select</option>
                        @foreach ($documentTypes as $value)
                          <option value="{{ $value->id }}">{{ $value->name }}</option>
                        @endforeach
                      </select>
                    </div>
                  </div>
                </div>

                <div class="col-md-12" style="display:none;" id="front_back">
                  <div class="row gx-2 ">
                    <!-- Front Upload -->
                    <div class="col-md-6 form-group position-relative">
                      <div class="card border-light rounded-4 bg-light-gray custom-height-190 d-flex align-items-center justify-content-center flex-column text-center overflow-hidden position-relative front-preview-card">
                        <!-- Upload UI -->
                        <div class="upload-content">
                          <em class="iconsax icon-292D32 fs-32 mb-3" icon-name="download-2"></em>
                          <p class="fs-13 fw-semibold text-black mb-0">Front</p>
                          <p class="mb-0 fs-11 text-gray">Upload front side</p>
                          <p class="mb-0 fs-11 text-black allowed-extensions text-primary mt-3"></p>
                        </div>
                        <!-- File Input -->
                        <input type="file" name="document_front" class="file-input-overlay" />
                      </div>
                    </div>
                    <!-- Back Upload -->
                    <div class="col-md-6 form-group">
                      <div class="card border-light rounded-4 bg-light-gray custom-height-190 d-flex align-items-center justify-content-center flex-column text-center">
                        <!-- Upload UI -->
                        <div class="upload-content">
                          <em class="iconsax icon-292D32 fs-32 mb-3" icon-name="download-2"></em>
                          <p class="fs-13 fw-semibold text-black mb-0">Back</p>
                          <p class="mb-0 fs-11 text-gray">Upload back side</p>
                          <p class="mb-0 fs-11 text-black allowed-extensions text-primary mt-3"></p>
                        </div>
                        <!-- Input -->
                        <input type="file" name="document_back" class="form-control file-input-overlay">
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-md-12" style="display:none;" id="single_file">
                  <div class="row gx-2">
                    <div class="col-md-12 form-group">
                      <div class="card border-light rounded-4 bg-light-gray custom-height-190 d-flex align-items-center justify-content-center flex-column text-center">
                        <!-- Upload UI -->
                        <div class="upload-content">
                          <em class="iconsax icon-292D32 fs-32 mb-3" icon-name="download-2"></em>
                          <p class="fs-13 fw-semibold text-black mb-0">Document</p>
                          <p class="mb-0 fs-11 text-gray">Upload Document</p>
                          <p class="mb-0 fs-11 text-black allowed-extensions text-primary mt-3"></p>
                        </div>
                        <!-- Input -->
                        <input type="file" name="document_front" class="form-control file-input-overlay">
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-md-12" style="display:none;">
                  <div class="form-group">
                    <label for="description" class="control-label">Expiry</label>
                    <div class="col-field-wrapper">
                      <div class="position-relative">
                        <input type="text" class="form-control date-picker" id="calendar" name="expiry" placeholder="Select">
                        <span class="position-absolute date-picker-icon">
                          <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="box-footer px-0">
            <div class="col-sm-12 text-end">
              <a href="{{ $backBtnLink }}" class="btn btn-outline-secondary me-3">Cancel</a>
              <button type="button" class="btn btn-primary save-btn">{{ $saveBtn }}</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>
<script type="text/javascript">
$(document).ready(function () {
    var form = $('.form-validate');
    $.validator.addMethod("dateDMY", function(value, element){
        if (this.optional(element)) return true;
        var match = /^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/.exec(value);
        if (!match) return false;
        var day = parseInt(match[1], 10), month = parseInt(match[2], 10) - 1, year = parseInt(match[3], 10);
        var d = new Date(year, month, day);
        return d.getFullYear() === year && d.getMonth() === month && d.getDate() === day;
    }, "Please enter a valid date in DD/MM/YYYY format.");

    $.validator.addMethod("futureDateDMY", function(value, element){
        if (this.optional(element)) return true;
        var match = /^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/.exec(value);
        if (!match) return false;
        var day = parseInt(match[1], 10), month = parseInt(match[2], 10) - 1, year = parseInt(match[3], 10);
        var inputDate = new Date(year, month, day);
        var today = new Date();
        today.setHours(0,0,0,0);
        return inputDate >= today;
    }, "Expiry date cannot be in the past.");

    if (form.length) {
        form.validate({
            ignore: ":hidden",
            errorClass: 'help-block text-danger',
            errorElement: "span",
            onkeyup: false,
            onfocusout: false,
            onclick: false,
            rules: {
                document_front: { required: true },
                document_back: { required: true },
                expiry: { required: true, dateDMY: true, futureDateDMY: true },
                type_of_document: { required: true }
            },
            messages: {
                document_front: { required: "Please upload the front side of the document" },
                document_back: { required: "Please upload the back side of the document" },
                expiry: {
                    required: "Please select an expiry date",
                    date: "Please enter a valid date",
                    futureDate: "Expiry date cannot be in the past"
                },
                type_of_document: { required: "Please select the type of document" }
            },
            highlight: function (element, errorClass) {
                $(element).closest('.form-group').addClass('has-error');
            },
            unhighlight: function (element, errorClass) {
                $(element).closest('.form-group').removeClass('has-error');
            },
            errorPlacement: function (error, element) {
                if (element.attr("type") === "file") {
                    element.closest('.form-group').append(error);
                } else {
                    error.insertAfter(element);
                }
            }
        });

        // Save button click handler
        $('.save-btn').on('click', function (e) {
            e.preventDefault();
            e.stopPropagation();
            $('#front_back input[type="file"]:hidden, #single_file input[type="file"]:hidden').prop('disabled', true);
            if (!form.valid()) {
                return;
            }
            var formData = new FormData(form[0]);
            $('#front_back input[type="file"], #single_file input[type="file"]').prop('disabled', false);
            $.ajax({
                url: form.attr('action'),
                type: "POST",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function () {
                    $('.save-btn').prop('disabled', true);
                    $('.save-btn').html('<em class="fa fa-spinner fa-spin"></em> Uploading...');
                },
                success: function (response) {
                  if (response.source === 'add-driver') {
                      window.location.href = "{{ route('transporter.drivers.create') }}?showStep=2&id=" + response.driver_id;
                  } else {
                      window.location.href = response.redirect_url;
                  }
                },
                error: function (xhr, status, error) {
                    console.log('Error:', xhr, status, error);
                },
                complete: function () {
                    $('.save-btn').prop('disabled', false);
                    $('.save-btn').html('{{ $saveBtn }}');
                }
            });
        });

        // Preview handler
        ['document_front', 'document_back'].forEach(name => {
            const $input = $(`input[name="${name}"]`);
            $input.on('change', function () {
                const file = this.files[0];
                const $card = $input.closest('.card');
                $card.find('.preview-img, .filename-overlay').remove();
                if (file && file.type.startsWith('image/')) {
                    const url = URL.createObjectURL(file);
                    $('<img>')
                        .attr('src', url)
                        .addClass('preview-img')
                        .css({
                            position: 'absolute',
                            top: 0,
                            left: 0,
                            width: '100%',
                            height: '100%',
                            objectFit: 'cover',
                            borderRadius: '1rem',
                            zIndex: 2,
                            cursor: 'pointer'
                        })
                        .prependTo($card)
                        .on('click', () => $input.click());
                } else if (file) {
                    $('<div>')
                        .text(file.name)
                        .addClass('filename-overlay')
                        .css({
                            position: 'absolute',
                            bottom: '10px',
                            left: '10px',
                            right: '10px',
                            background: 'rgba(0,0,0,0.6)',
                            color: '#fff',
                            padding: '5px',
                            fontSize: '12px',
                            borderRadius: '4px',
                            textAlign: 'center',
                            zIndex: 2,
                            cursor: 'pointer'
                        })
                        .prependTo($card)
                        .on('click', () => $input.click());
                }
            });
        });

        // Datepicker init
        $('.date-picker').datepicker({
            format: 'dd/mm/yyyy',
            autoclose: true,
            startDate: new Date(),
            todayHighlight: true
        });
    }

    // Document type change handler
    $('#type_of_document').on('change', function () {
        var typeId = $(this).val();
        if (typeId) {
            $.ajax({
                url: '{{ route("transporter.drivers.documents.types") }}',
                type: 'GET',
                data: { id: typeId },
                success: function (response) {
                    response = response.document;
                    let fileType = response.type;
                    let extensions = fileType === 'image' ? 'jpg|jpeg|png' : 'pdf';
                    let readableExtensions = extensions.replace(/\|/g, ", ").toUpperCase();
                    $('input[name="document_front"], input[name="document_back"]').rules("remove");
                    $('input[name="document_front"], input[name="document_back"]').rules("add", {
                        extension: extensions,
                        messages: {
                            extension: `Only ${readableExtensions} files are allowed.`
                        }
                    });
                    $('.allowed-extensions').text(`Allowed: ${readableExtensions}`);
                    if (response.front && response.back) {
                        $('#front_back').show();
                        $('#single_file').hide();
                        $('input[name="document_front"]').rules("add", {
                            required: true,
                            messages: { required: "Please upload the front side of document" }
                        });
                        $('input[name="document_back"]').rules("add", {
                            required: true,
                            messages: { required: "Please upload the back side of document" }
                        });
                    } else {
                        $('#front_back').hide();
                        $('#single_file').show();
                        $('input[name="document_front"]').rules("add", {
                            required: true,
                            messages: { required: "Please upload the document" }
                        });
                        $('input[name="document_back"]').rules("remove", "required");
                    }
                    if (response.expiry) {
                        $('input[name="expiry"]').closest('.col-md-12').show();
                        $('input[name="expiry"]').rules("add", {
                            required: true,
                            dateDMY: true,
                            futureDateDMY: true
                        });
                    } else {
                        $('input[name="expiry"]').closest('.col-md-12').hide();
                        $('input[name="expiry"]').rules("remove");
                    }
                },
                error: function () {
                    console.error('Error fetching document details');
                }
            });
        } else {
            $('#document-description').text('');
            $('#front_back, #single_file').hide();
            $('input[name="expiry"]').closest('.col-md-12').hide();
            $('input[type="file"]').val('');
            $('.preview-img, .filename-overlay').remove();
            $('input[name="document_front"], input[name="document_back"]').rules("remove");
            $('input[name="expiry"]').rules("remove");
        }
    });
});
</script>
@endsection