@extends('backend.layouts.admin.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('admin.purchase-orders.index') }}">Purchase Orders</a>
        </li>
        <li class="active">Purchase Order Details</li>
      </ol>
      <div class="d-flex justify-content-between align-items-center flex-wrap">
        <h1>{{$title.' '.$po->po_number}}</h1>
        <a href="{{ route('admin.jobs.list-by-context', ['purchase_order_id' => $po->id, 'added_by_me' => 1]) }}" class="btn btn-sm btn-primary ">
          <svg width="16px" height="16px" id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">
            <defs>
              <style>
                .st0 { fill: #fff; }
                .st1 { fill: none; }
              </style>
            </defs>
            <path class="st0" d="M5.95,3.7c0-1.13,0-1.55,1.55-1.55h1.01c1.55,0,1.55.43,1.55,1.55v.03h-4.12v-.03h0ZM8.74,9.23c0,.71,0,.81-.82.81s-.82-.13-.82-.81v-.84h1.64v.83h0ZM14.07,4.66c-.57-.63-1.51-.94-2.89-.94h-.16v-.03c0-1.12,0-2.51-2.51-2.51h-1.01c-2.51,0-2.51,1.39-2.51,2.51v.03h-.16c-1.38,0-2.32.31-2.89.94-.66.73-.64,1.72-.57,2.39v.05l.05.46c0,.15.1.29.22.37.16.1.38.25.52.32.09.06.19.11.29.17,1.14.63,2.39,1.05,3.67,1.25.06.63.33,1.36,1.79,1.36s1.75-.73,1.79-1.37c1.36-.22,2.67-.69,3.86-1.39.04-.02.07-.04.1-.06.24-.14.5-.31.73-.47.11-.08.19-.21.2-.35v-.02l.04-.31s0-.07.01-.12c.05-.67.04-1.59-.59-2.29h.02Z"/>
            <path class="st1" d="M5.95,3.7c0-1.13,0-1.55,1.55-1.55h1.01c1.55,0,1.55.43,1.55,1.55v.03h-4.12v-.03h0ZM8.74,9.23c0,.71,0,.81-.82.81s-.82-.13-.82-.81v-.84h1.64v.83h0ZM14.07,4.66c-.57-.63-1.51-.94-2.89-.94h-.16v-.03c0-1.12,0-2.51-2.51-2.51h-1.01c-2.51,0-2.51,1.39-2.51,2.51v.03h-.16c-1.38,0-2.32.31-2.89.94-.66.73-.64,1.72-.57,2.39v.05l.05.46c0,.15.1.29.22.37.16.1.38.25.52.32.09.06.19.11.29.17,1.14.63,2.39,1.05,3.67,1.25.06.63.33,1.36,1.79,1.36s1.75-.73,1.79-1.37c1.36-.22,2.67-.69,3.86-1.39.04-.02.07-.04.1-.06.24-.14.5-.31.73-.47.11-.08.19-.21.2-.35v-.02l.04-.31s0-.07.01-.12c.05-.67.04-1.59-.59-2.29h.02Z"/>
            <path class="st0" d="M13.66,9.29c.35-.17.76.11.73.5l-.21,2.34c-.14,1.33-.69,2.69-3.62,2.69h-5.08c-2.93,0-3.48-1.36-3.62-2.69l-.2-2.21c-.04-.39.36-.67.72-.51.76.34,1.9.82,2.67,1.04.16.05.3.16.37.31.42.81,1.28,1.24,2.51,1.24s2.09-.45,2.51-1.26c.08-.15.21-.27.37-.32.82-.23,2.05-.78,2.85-1.15v.02Z"/>
          </svg>
          View Jobs</a>
        
      </div>
  
    </section>
    <!-- Main content -->
    <section class="content pb-0 pt-0">
      <div class="row">
        <div class="col-md-12">
          <div class="row mt-4">
            <div class="col-md-2 col-xs-6 detail-width-20">
              <div class="form-group">
                <label class="control-label text-dark-gray fs-14 fw-semibold">PO Number</label>
                <div class="fs-16 text-black">{{$po->po_number ?? null}}</div>
              </div>
            </div>
            <div class="col-md-2 col-xs-6 detail-width-20">
              <div class="form-group">
                <label class="control-label text-dark-gray fs-14 fw-semibold">Company Name</label>
                <div class="fs-16 text-black">{{$po->company_name ?? null}}</div>
              </div>
            </div>
            <div class="col-md-2 col-xs-6 detail-width-20">
              <div class="form-group">
                <label class="control-label text-dark-gray fs-14 fw-semibold">Contact Person</label>
                <div class="fs-16 text-black">{{$po->contact_person ?? null}}</div>
              </div>
            </div>
            <div class="col-md-2 col-xs-6 detail-width-20">
              <div class="form-group">
                <label class="control-label text-dark-gray fs-14 fw-semibold">Email</label>
                <div class="fs-16 text-black">{{$po->email ?? null}}</div>
              </div>
            </div>
            <div class="col-md-2 col-xs-6 detail-width-20">
              <div class="form-group">
                <label class="control-label text-dark-gray fs-14 fw-semibold">Phone</label>
                <div class="fs-16 text-black">{{$po->phone ?? null}}</div>
              </div>
            </div>
            <div class="col-md-2 col-xs-6 detail-width-20">
              <div class="form-group">
                <label class="control-label text-dark-gray fs-14 fw-semibold">Quantity (Metric Tons)</label>
                <div class="fs-16 text-black">{{(int)$po->quantity ?? null}}</div>
              </div>
            </div>
            <div class="col-md-2 col-xs-6 detail-width-20">
              <div class="form-group">
                <label class="control-label text-dark-gray fs-14 fw-semibold">Load Date </label>
                <div class="fs-16 text-black">{{$po->load_date ? $po->load_date->format('d/m/Y') : null}}</div>
              </div>
            </div>
            <div class="col-md-2 col-xs-6 detail-width-20">
              <div class="form-group">
                <label class="control-label text-dark-gray fs-14 fw-semibold">Offload Date </label>
                <div class="fs-16 text-black">{{$po->offload_date ? $po->offload_date->format('d/m/Y') : null}}</div>
              </div>
            </div>
            <div class="col-md-2 col-xs-6 detail-width-20">
              <div class="form-group">
                <label class="control-label text-dark-gray fs-14 fw-semibold">Note</label>
                <div class="fs-16 text-black">{{$po->note ?? null}}</div>
              </div>
            </div>
          </div>
          


          
          <div class="border-top mt-3 ">
            <div class="box-body  px-0">
              
              <div class="align-items-center d-flex justify-content-between mb-3">
                <h2 class="fs-24 fw-semibold text-black">Documents </h2>
              </div>

              <table class="table table-bordered table-hover" id="tbl-users" aria-describedby="detail-purchase-order-list">
                <thead>
                  <th scope="col">Documents</th>
                  <th scope="col">Uploaded By</th>
                  <th scope="col">Date & Time</th>
                  <th scope="col" class="action">Action</th>
                </thead>
                <tbody>
                  @foreach ($documents as $document)
                    <tr>
                      <td data-type='text'><a href="{{ route('admin.purchase-order.documents.show', ['purchase_order' => $po->id, 'document' => $document->id]) }}" target="_blank">{{$document->mandatoryDocument->name ?? null}}</a></td>
                      <td data-type='text'>{{$document->uploadedBy->name ?? null}}</td>
                      <td data-type='text'>{{$document->uploaded_date_time?->format('d/m/Y, h:i A')}}</td>
                      @php
                        $isExpired = isset($document->expiry_date) ? \Carbon\Carbon::parse($document->expiry_date)->lte(\Carbon\Carbon::today()) : '';
                      @endphp
                      <td data-type='none'>
                        <a href="{{ route('admin.purchase-order.documents.show', ['purchase_order' => $po->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="" class="delete-document" data-document-id="{{$document->id ?? null }}" data-purchase-order-id="{{$po->id ?? null}}">
                          <em class="iconsax icon-292D32 fs-20" icon-name="trash"></em>

                        </a>
                      </td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      

    </section>
   <script type="text/javascript">

$(document).ready(function() {
    $.fn.dataTable.ext.errMode = () => alert('{{__("messages.datatable-error-message")}}');
    var table = $('#tbl-users').DataTable({
      info: true,
      searching: true,
      //ajax: '../server_side/scripts/server_processing.php',
      paging: false, // disables pagination
      dom: 'frt<"bottom"ipl><"clear">',
      order: [], // Disable initial sorting to maintain server-side order
      columnDefs: [
        { targets: ['action'], orderable: false }
      ]
    });
    $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');

    $('#tbl-users_filter').append(`
      <div class="d-flex justify-content-end flex-wrap jobs-right-filter">
        <div class="position-relative me-3 ms-3">
          <input type="text" class="form-control date-picker" placeholder="Date Range" id="user-calendar">
          <span class="position-absolute date-picker-icon">
            <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>
          </span>
        </div>
        <a href="{{ route('admin.purchase-order.documents.create', ['purchase_order' => $po->id]) }}" class="upload-doc-btn">
          <button class="btn btn-primary">
            <em class="iconsax" icon-name="upload-2"></em> Upload Document
          </button>
        </a>
      </div>
    `);

  // Document deletion
  $('.delete-document').on('click', function(e) {
    e.preventDefault();
    
    const documentId = $(this).data('document-id');
    const purchaseOrderId = $(this).data('purchase-order-id');
    
    if (!documentId || !purchaseOrderId) {
      toastr.error('Document information not found');
      return;
    }

    Swal.fire({
      title: 'Are you sure?',
      text: "This document will be deleted. You won't be able to revert this!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
      if (result.isConfirmed) {
        $.ajax({
          url: "{{ route('admin.purchase-order.documents.destroy', [':purchase_order', ':document']) }}"
            .replace(':purchase_order', purchaseOrderId)
            .replace(':document', documentId),
          type: 'DELETE',
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          success: function(response) {
            if (response.status === 'success') {
              toastr.success(response.message);
              // Reload the page to refresh the document list
              setTimeout(function() {
                window.location.reload();
              }, 1000);
            } else {
              toastr.error(response.message);
            }
          },
          error: function(xhr) {
            toastr.error('Failed to delete document');
          }
        });
      }
    });
  });

  $(function () {
    let startDate = null;
    let endDate = null;

    $('#user-calendar').daterangepicker({
        autoUpdateInput: false,
        locale: {
            cancelLabel: 'Clear',
            format: 'DD/MM/YYYY'
        }
    });

    $('#user-calendar').on('apply.daterangepicker', function (ev, picker) {
        startDate = picker.startDate;
        endDate = picker.endDate;
        $(this).val(startDate.format('DD/MM/YYYY') + ' - ' + endDate.format('DD/MM/YYYY'));
        $('#tbl-users').DataTable().draw();
    });

    $('#user-calendar').on('cancel.daterangepicker', function () {
        $(this).val('');
        startDate = null;
        endDate = null;
        $('#tbl-users').DataTable().draw();
    });

    $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
      if (settings.nTable.id !== 'tbl-users') return true;

      if (!startDate || !endDate) return true;

      const creationDate = data[2]; // index of Date & Time column
      const parsedDate = moment(creationDate, 'DD/MM/YYYY, hh:mm A', true); // must match PHP format

      if (!parsedDate.isValid()) return true;

      return parsedDate.isSameOrAfter(startDate) && parsedDate.isSameOrBefore(endDate);
    });
  });

});

  
</script>

@endsection