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

@section('content')

<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="{{ $isTransporter ? route('transporter.jobs.index') : route('admin.jobs.index') }}">Jobs</a></li>
    <li><a href="{{ $isTransporter ? route('transporter.jobs.show', $jobId) : route('admin.jobs.show', $jobId) }}">Job #{{ $jobId }}</a></li>
    <li class="active">Upload Document</li>
  </ol>
  <div class="d-flex justify-content-between align-items-center flex-wrap">
    <h1>{{ $title }}</h1>
  </div>

</section>

<section class="content pb-0">
  @include('backend.layouts.alert')
  <div class="row">
    <div class="col-md-12">
      <div class="border-top">
        <div>
          <form action="{{  $isTransporter ? route('transporter.jobs.documents.store', ['job' => $jobId]) : route('admin.jobs.documents.store', ['job' => $jobId]) }}" method="POST" class="form-horizontal form-validate" enctype="multipart/form-data">
            @csrf
            <div class="box-body px-0 form-box-scroll">
              <div class="mx-auto custom-max-width-354">
                <div class="row">
                  @if($isTransporter)
                  <div class="col-md-12">
                    <div class="form-group">
                      <label class="control-label">Trip ID</label>
                      <div class="col-field-wrapper">
                        <select id="trip_id" class="form-control" name="trip_id" required>
                          <option value="">Select</option>
                          @foreach ($job->trips as $value)
                            <option value="{{ $value->id }}" data-status="{{ $value->status }}" data-status-label="{{ $value->status_label }}">Trip#{{ ucwords($value->id) }}  ({{ ucwords($value->status_label) }})</option>
                          @endforeach
                        </select>
                      </div>
                    </div>
                  </div>

                  <!-- Load Metric Tons Field (for Waybridge Bill) -->
                  <div class="col-md-12" style="display:none;" id="load_metric_tons_field">
                    <div class="form-group">
                      <label class="control-label" for="load_metric_tons">Load Metric Tons</label>
                      <div class="col-field-wrapper">
                        <input type="number" step="0.01" min="0" class="form-control" name="load_metric_tons" id="load_metric_tons" placeholder="Enter load metric tons">
                        <br><small class="form-text text-muted" id="load_remaining_text">Must be less than or equal to </small>
                      </div>
                    </div>
                  </div>

                  <!-- Offload Metric Tons Field (for Offloading Receipt) -->
                  <div class="col-md-12" style="display:none;" id="offload_metric_tons_field">
                    <div class="form-group">
                      <label class="control-label" for="offload_metric_tons">Offload Metric Tons</label>
                      <div class="col-field-wrapper">
                        <input type="number" step="0.01" min="0" class="form-control" name="offload_metric_tons" id="offload_metric_tons" placeholder="Enter offload metric tons">
                        <br><small class="form-text text-muted" id="offload_remaining_text">Must be less than or equal to loaded metric tons</small>
                      </div>
                    </div>
                  </div>
                  @endif

                  <div class="col-md-12">
                    <div class="form-group">
                      <label class="control-label" for="type_of_document">Type of Document</label>
                      <div class="col-field-wrapper">
                        <select id="type_of_document" class="form-control" name="document_type" required>
                          <option value="">Select</option>
                          @unless($isTransporter)
                            @foreach ($documentTypes as $value)
                              <option value="{{ $value->id }}">{{ ucwords($value->name) }}</option>
                            @endforeach
                          @endunless
                        </select>
                      </div>
                    </div>
                  </div>

                  <div class="col-md-12" style="display:none;" id="front_back">
                    <div class="row gx-2">
                      <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">
                          <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>
                          <input type="file" name="document_front" class="file-input-overlay" />
                        </div>
                      </div>
                      <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 position-relative">
                          <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 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 position-relative">
                          <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 type="file" name="document_front" class="form-control file-input-overlay">
                        </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>
  </div>
</section>

<script type="text/javascript">
$(function(){
  const form = $('.form-validate');
  form.validate({
    ignore: ":hidden",
    errorClass: 'help-block text-danger',
    errorElement: 'span',
    onkeyup: false,
    onfocusout: false,
    onclick: false,
    rules: {
      document_front: { required: true },
      document_type: { required: true },
      @if($isTransporter)
      trip_id: { required: true }
      @endif
    },
    messages: {
      document_front: { required: 'Please upload the front side of the document' },
      document_type: { required: 'Please select the type of document' },
      @if($isTransporter)
      trip_id: { required: 'Please select trip ' }
      @endif
    },
    highlight: function (element) { $(element).closest('.form-group').addClass('has-error'); },
    unhighlight: function (element) { $(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); }
    }
  });

  // Cache all document types (id + name) from server for dynamic population
  const ALL_DOC_TYPES = @json($documentTypes->map(function($d){ return ['id' => $d->id, 'name' => $d->name]; })->values());
  console.log(ALL_DOC_TYPES);
  $('.save-btn').on('click', function(e){
    e.preventDefault();
    // Avoid duplicate FormData keys when one section is hidden
    $('#front_back input[type="file"]:hidden, #single_file input[type="file"]:hidden').prop('disabled', true);
    if (!form.valid()){
      $('#front_back input[type="file"], #single_file input[type="file"]').prop('disabled', false);
      return;
    }
    const formData = new FormData(form[0]);
    // Re-enable file inputs after FormData creation
    $('#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).html('<em class="fa fa-spinner fa-spin"></em> Uploading...'); },
      success: function(resp){
        if (resp.success){
          toastr.success(resp.message || 'Document uploaded successfully');
          setTimeout(function(){ window.location.href = resp.redirect_url || '{{ $backBtnLink }}'; }, 1200);
        } else {
          toastr.error(resp.message || 'Upload failed');
        }
      },
      error: function(){ toastr.error('Upload failed'); },
      complete: function(){ $('.save-btn').prop('disabled', false).html('{{ $saveBtn }}'); }
    });
  });

  // Preview selected image/PDF files
  ['document_front', 'document_back'].forEach(function(fieldName){
    const $input = $('input[name="' + fieldName + '"]');
    $input.on('change', function(){
      const file = this.files && this.files[0];
      const $card = $(this).closest('.card');
      // Remove existing preview elements
      $card.find('.preview-img, .filename-overlay').remove();

      if (!file) return;

      if (file.type && 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', () => $(this).click());
      } else {
        // Non-image (e.g., PDF) - show filename overlay
        $('<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', () => $(this).click());
      }
    });
  });

  @if($isTransporter)
  // Auto-populate document type options based on selected trip status (transporter only)
  $('#trip_id').on('change', function(){
    const selected = $(this).find('option:selected');
    const statusLabel = (selected.data('status-label') || '').toString().toLowerCase();
    const docSelect = $('#type_of_document');

    // Reset document type dropdown to default
    docSelect.empty().append('<option value="">Select</option>');
    // Hide upload sections until a document type is chosen
    $('#front_back, #single_file, #load_metric_tons_field, #offload_metric_tons_field').hide();
    // Clear file inputs and previews when changing trip
    $('input[type="file"], input[name="load_metric_tons"], input[name="offload_metric_tons"]').val('');
    $('.preview-img, .filename-overlay').remove();
    // Reset hint text to default
    $('#load_remaining_text').text("Must be less than transporter's remaining quantity");
    $('#offload_remaining_text').text("Must be less than or equal to loaded metric tons");

    let targetNames = [];
    if (statusLabel === 'pending') {
      targetNames = ['waybridge bill'];
    } else if (statusLabel === 'in_progress' || statusLabel === 'in progress') {
      targetNames = ['offloading receipt'];
    } else {
      return; // no options for unknown/completed
    }

    // Add matching options
    let selectedValue = '';
    targetNames.forEach(function(nameLower){
      const doc = ALL_DOC_TYPES.find(function(d){ return (d.name || '').toLowerCase() === nameLower; });
      console.log(doc);
      if (doc) {
        const option = $('<option/>', { value: doc.id, text: doc.name });
        docSelect.append(option);
        selectedValue = doc.id; // auto-select the only option
      }
    });

    if (selectedValue) {
      docSelect.val(selectedValue).trigger('change');
    }
  });
  @endif

  $('#type_of_document').on('change', function(){
    var typeId = $(this).val();
    if (!typeId){
      $('#front_back, #single_file, #load_metric_tons_field, #offload_metric_tons_field').hide();
      $('input[type="file"], input[name="load_metric_tons"], input[name="offload_metric_tons"]').val('');
      $('.preview-img, .filename-overlay').remove();
      return;
    }
    $.ajax({
      url: '{{  $isTransporter ? route("transporter.jobs.document-types") : route("admin.jobs.document-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 readable = 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 ${readable} files are allowed.` } });
        $('.allowed-extensions').text(`Allowed: ${readable}`);

        if (response.front && response.back){
          $('#front_back').show();
          $('#single_file').hide();
          // Clear previous inputs and previews when switching layout
          $('input[type="file"]').val('');
          $('.preview-img, .filename-overlay').remove();
          $('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();
          // Clear previous inputs and previews when switching layout
          $('input[type="file"]').val('');
          $('.preview-img, .filename-overlay').remove();
          $('input[name="document_front"]').rules('add', { required: true, messages: { required: 'Please upload the document' }});
          $('input[name="document_back"]').rules('remove', 'required');
        }

        @if($isTransporter)
        // Show/hide metric tons fields based on document type
        const docName = (response.name || '').toLowerCase();
        $('#load_metric_tons_field, #offload_metric_tons_field').hide();
        $('input[name="load_metric_tons"], input[name="offload_metric_tons"]').rules('remove');
        
        if (docName === 'waybridge bill') {
          $('#load_metric_tons_field').show();
          $('input[name="load_metric_tons"]').rules('add', { 
            required: true, 
            number: true,
            min: 0,
            messages: { 
              required: 'Please enter load metric tons',
              number: 'Please enter a valid number',
              min: 'Load metric tons cannot be negative'
            }
          });
          
          // Fetch remaining allocation for this trip
          const tripId = $('#trip_id').val();
          if (tripId) {
            $.ajax({
              url: '{{ route("transporter.jobs.get-remaining-allocation") }}',
              type: 'GET',
              data: { trip_id: tripId, type: 'load' },
              success: function(resp) {
                if (resp.success) {
                  $('#load_remaining_text').text(`Must be less than or equal to ${resp.remaining} tons`);
                  // Optionally set max attribute for better UX
                  $('input[name="load_metric_tons"]').attr('max', resp.remaining);
                  // Add dynamic max validation
                  $('input[name="load_metric_tons"]').rules('add', {
                    max: parseFloat(resp.remaining),
                    messages: {
                      max: `Load metric tons cannot exceed remaining allocation of ${resp.remaining} tons`
                    }
                  });
                }
              }
            });
          }
        } else if (docName === 'offloading receipt') {
          $('#offload_metric_tons_field').show();
          $('input[name="offload_metric_tons"]').rules('add', {
            required: true, 
            number: true,
            min: 0,
            messages: { 
              required: 'Please enter offload metric tons',
              number: 'Please enter a valid number',
              min: 'Offload metric tons cannot be negative'
            }
          });
          
          // Fetch remaining allocation and load tons for this trip
          const tripId = $('#trip_id').val();
          if (tripId) {
            $.ajax({
              url: '{{ route("transporter.jobs.get-remaining-allocation") }}',
              type: 'GET',
              data: { trip_id: tripId, type: 'offload' },
              success: function(resp) {
                if (resp.success && resp.loaded > 0) {
                  $('#offload_remaining_text').text(`Must be less than or equal to loaded metric tons (${resp.loaded} tons)`);
                  // Set max attribute dynamically
                  $('input[name="offload_metric_tons"]').attr('max', resp.loaded);
                  // Add custom validation rule for max value
                  $('input[name="offload_metric_tons"]').rules('add', {
                    max: resp.loaded,
                    messages: {
                      max: `Offload metric tons cannot exceed loaded metric tons of ${resp.loaded} tons`
                    }
                  });
                } else {
                  $('#offload_remaining_text').text('Must be less than or equal to loaded metric tons');
                }
              }
            });
          }
        }
        @endif
      }
    });
  });
});
</script>

@endsection