@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 Invoice</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="{{ $save }}" 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">

                  <div class="col-md-12">
                    <div class="form-group">
                      <label class="control-label">Invoice Number</label>
                      <div class="col-field-wrapper">
                        <input type="text" class="form-control" name="invoice" required>
                      </div>
                    </div>
                  </div>

                  @if(!$isTransporter)
                  <div class="col-md-12">
                    <div class="form-group">
                      <label class="control-label">Transporter</label>
                      <div class="col-field-wrapper">
                        <select class="form-control" name="transporter_id" required>
                          <option value="">Select Transporter</option>
                          @foreach($job->transporters ?? [] as $transporter)
                            <option value="{{ $transporter->id }}">{{ $transporter->name ?? 'null' }}</option>
                          @endforeach
                        </select>
                      </div>
                    </div>
                  </div>
                  @else
                    <input type="hidden" name="transporter_id" value="{{ auth()->id() }}">
                  @endif

                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="control-label">Quantity</label>
                      <div class="col-field-wrapper">
                        <input type="number" class="form-control" name="quantity" min="1" required>
                      </div>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="control-label">Amount</label>
                      <div class="col-field-wrapper">
                        <input type="number" class="form-control" name="amount" min="0" step="0.01" required>
                      </div>
                    </div>
                  </div>

                  <div class="col-md-12">
                    <div class="form-group">
                      <label class="control-label">Invoice Document Type</label>
                      <div class="col-field-wrapper">
                        <select id="invoice_document_type" class="form-control" name="invoice_document_type" required>
                          <option value="">Select Type</option>
                          @foreach($documentTypes ?? [] as $doc)
                            <option value="{{ $doc->id }}">{{ $doc->name ?? 'null' }}</option>
                          @endforeach
                        </select>
                      </div>
                    </div>
                  </div>

                  <div class="col-md-12" style="display:none;" id="invoice_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="invoice_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="invoice_document_back" class="form-control file-input-overlay">
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="col-md-12" style="display:none;" id="invoice_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="invoice_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: {
      invoice: { required: true, minlength: 3, maxlength: 255 },
      @if(!$isTransporter)
      transporter_id: { required: true },
      @endif
      quantity: { required: true, number: true, min: 1 },
      amount: { required: true, number: true, min: 0 },
      invoice_document_type: { required: true },
      invoice_document_front: { required: true, extension: "jpg|jpeg|png|pdf" },
      invoice_document_back: { extension: "jpg|jpeg|png|pdf" }
    },
    messages: {
      invoice: { required: 'Please enter invoice number' },
      @if(!$isTransporter)
      transporter_id: { required: 'Please select a transporter' },
      @endif
      quantity: { required: 'Please enter quantity' },
      amount: { required: 'Please enter amount' },
      invoice_document_type: { required: 'Please select document type' },
      invoice_document_front: { required: 'Please upload front side document' }
    },
    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('.card').after(error); }
      else { error.insertAfter(element); }
    }
  });

  $('.save-btn').on('click', function(e){
    e.preventDefault();
    $('#invoice_front_back input[type="file"]:hidden, #invoice_single_file input[type="file"]:hidden').prop('disabled', true);
    if (!form.valid()){
      $('#invoice_front_back input[type="file"], #invoice_single_file input[type="file"]').prop('disabled', false);
      return;
    }
    const formData = new FormData(form[0]);
    $('#invoice_front_back input[type="file"], #invoice_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){
        toastr.success(resp.message || 'Invoice uploaded successfully');
        setTimeout(function(){ window.location.href = '{{ $backBtnLink }}'; }, 1200);
      },
      error: function(xhr){
        if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors){
          $.each(xhr.responseJSON.errors, function (field, messages) { toastr.error(messages[0]); });
        } else {
          toastr.error('Upload failed');
        }
      },
      complete: function(){ $('.save-btn').prop('disabled', false).html('{{ $saveBtn }}'); }
    });
  });

  // Document type change behavior (same as job document)
  $('#invoice_document_type').on('change', function(){
    var typeId = $(this).val();
    if (typeId){
      $.ajax({
        url: '{{ $isTransporter ? route('transporter.jobs.invoice.document-types') : route('admin.jobs.invoice.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 readableExtensions = extensions.replace(/\|/g, ", ").toUpperCase();

          $('input[name="invoice_document_front"], input[name="invoice_document_back"]').rules('remove');
          $('input[name="invoice_document_front"], input[name="invoice_document_back"]').rules('add', {
            extension: extensions,
            messages: { extension: `Only ${readableExtensions} files are allowed.` }
          });

          $('.allowed-extensions').text(`Allowed: ${readableExtensions}`);

          if (response.front && response.back){
            $('#invoice_front_back').show();
            $('#invoice_single_file').hide();
            $('input[name="invoice_document_front"]').rules('add', { required: true, messages: { required: 'Please upload the front side of invoice' } });
            $('input[name="invoice_document_back"]').rules('add', { required: true, messages: { required: 'Please upload the back side of invoice' } });
          } else {
            $('#invoice_front_back').hide();
            $('#invoice_single_file').show();
            $('input[name="invoice_document_front"]').rules('add', { required: true, messages: { required: 'Please upload the invoice document' } });
            $('input[name="invoice_document_back"]').rules('remove', 'required');
          }
        },
        error: function(){ console.error('Error fetching invoice document details'); }
      });
    } else {
      $('#invoice_front_back, #invoice_single_file').hide();
      $('input[type="file"]').val('');
      $('.preview-img, .filename-overlay').remove();
      $('input[name="invoice_document_front"], input[name="invoice_document_back"]').rules('remove');
    }
  });

  // Preview selected image/PDF files
  ['invoice_document_front', 'invoice_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());
      }
    });
  });
});
</script>

@endsection