@extends('admin.layouts.app')

@section('title', 'Customer Delivery Status')

@push('styles')
<style>
.badge { font-size: 13px; padding: 6px 10px; border-radius: 8px; }
.btn-view-boxes { background: linear-gradient(135deg, #17a2b8, #138496); color: #fff; border: none; padding: 6px 14px; border-radius: 20px; font-size: 12px; }
.btn-view-boxes:hover { background: linear-gradient(135deg, #138496, #117a8b); color: #fff; }
.btn-manage-hold { background: linear-gradient(135deg, #fd7e14, #e96b00); color: #fff; border: none; padding: 6px 14px; border-radius: 20px; font-size: 12px; }
.btn-manage-hold:hover { background: linear-gradient(135deg, #e96b00, #d35400); color: #fff; }
#boxesContainer { display: flex; flex-wrap: wrap; gap: 6px; }
.delivery-box { width: 38px; height: 38px; min-width: 38px; border: 2px solid #ccc; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: bold; border-radius: 6px; }
.delivery-box.pending { background-color: #fff; color: #555; }
.delivery-box.delivered { background-color: #28a745; color: #fff; border-color: #28a745; }
.delivery-box.sunday { background-color: #dc3545; color: #fff; border-color: #dc3545; }
.delivery-box.hold { background-color: #fd7e14; color: #fff; border-color: #fd7e14; }
.boxes-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 15px; font-size: 13px; }
.boxes-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-box { width: 18px; height: 18px; border-radius: 4px; display: inline-block; }
.legend-box.delivered { background: #28a745; }
.legend-box.pending { background: #fff; border: 2px solid #ccc; }
.legend-box.sunday { background: #dc3545; }
.legend-box.hold { background: #fd7e14; }
.hold-date-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #fff3e0; border-radius: 8px; margin-bottom: 8px; }
.hold-date-item .date-text { font-weight: 600; color: #e65100; }
.hold-date-item .btn-delete { background: #dc3545; color: #fff; border: none; padding: 4px 10px; border-radius: 15px; font-size: 11px; cursor: pointer; }
.hold-date-item.past-hold { background: #f5f5f5; }
.hold-date-item.past-hold .date-text { color: #777; }
</style>
@endpush

@section('content')
<h4 class="font-weight-bold py-3 mb-0">Customer Delivery Status</h4>
<p class="text-muted mb-3">View delivery boxes, manage hold dates, and track customer delivery progress</p>

<div class="card" style="padding: 15px;">
<div class="card-datatable">
<table id="customerTable" class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>Customer Name</th>
      <th>Phone</th>
      <th>Package</th>
      <th>Start Date</th>
      <th>End Date</th>
      <th>Extended To</th>
      <th>Hold Days</th>
      <th>Total Delivered</th>
      <th>Today Status</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
  @foreach ($rows as $row)
  @php $customer = $row->customer; @endphp
  <tr>
    <td><strong>{{ $customer->Fname }} {{ $customer->Lname }}</strong></td>
    <td>{{ $customer->Phone }}</td>
    <td>{{ $customer->package->Name ?? '' }}@if (! $customer->package)<span class="text-muted">N/A</span>@endif</td>
    <td>{{ $customer->PkgDate ? $customer->PkgDate->format('d-m-Y') : '-' }}</td>
    <td>{{ $customer->Validity ? $customer->Validity->format('d-m-Y') : '-' }}</td>
    <td>
      @if ($row->extended_date)
        <span class="text-success font-weight-bold">{{ \Carbon\Carbon::parse($row->extended_date)->format('d-m-Y') }}</span>
      @else
        <span class="text-muted">-</span>
      @endif
    </td>
    <td>
      @if ($row->hold_count > 0)
        <span class="badge bg-warning text-dark">{{ $row->hold_count }} days</span>
      @else
        <span class="text-muted">0</span>
      @endif
    </td>
    <td><span class="badge bg-success">{{ $row->delivered_count }}</span></td>
    <td>
      @if ($row->is_today_delivered)
        <span class="badge" style="background: linear-gradient(135deg, #28a745, #1e7e34); color: #fff; padding: 6px 12px; border-radius: 20px; font-size: 11px;"><i class="fa fa-check-circle"></i> Delivered</span>
      @else
        <span class="badge" style="background: linear-gradient(135deg, #ffc107, #e0a800); color: #000; padding: 6px 12px; border-radius: 20px; font-size: 11px;"><i class="fa fa-clock"></i> Pending</span>
      @endif
    </td>
    <td>
      <button class="btn-view-boxes" onclick="viewBoxes({{ $customer->id }}, '{{ addslashes($customer->full_name) }}')">
        <i class="fa fa-th"></i> Boxes
      </button>
      <button class="btn-manage-hold" onclick="manageHold({{ $customer->id }}, '{{ addslashes($customer->full_name) }}')">
        <i class="fa fa-pause"></i> Hold
      </button>
    </td>
  </tr>
  @endforeach
  </tbody>
</table>
</div>
</div>

<div class="modal fade" id="boxesModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-info text-white">
        <h5 class="modal-title"><i class="fa fa-th"></i> Delivery Boxes - <span id="boxesCustomerName"></span></h5>
        <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body">
        <div id="boxesLoading" class="text-center py-4"><div class="spinner-border text-info"></div><p class="mt-2">Loading...</p></div>
        <div id="boxesContent" style="display:none;">
          <div class="row mb-3">
            <div class="col-4"><label class="text-muted small">Start Date</label><div id="boxesPkgStart" class="font-weight-bold"></div></div>
            <div class="col-4"><label class="text-muted small">Original End</label><div id="boxesPkgEnd" class="font-weight-bold"></div></div>
            <div class="col-4"><label class="text-muted small">Extended To</label><div id="boxesExtendedEnd" class="font-weight-bold text-success"></div></div>
          </div>
          <p id="boxesSummary" class="font-weight-bold mb-2"></p>
          <div class="boxes-legend">
            <span><i class="legend-box delivered"></i> Delivered</span>
            <span><i class="legend-box pending"></i> Pending</span>
            <span><i class="legend-box hold"></i> Hold (H)</span>
            <span><i class="legend-box sunday"></i> Sunday (S)</span>
          </div>
          <div id="boxesContainer"></div>
        </div>
        <div id="boxesError" class="alert alert-warning" style="display:none;"></div>
      </div>
      <div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button></div>
    </div>
  </div>
</div>

<div class="modal fade" id="holdModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-warning">
        <h5 class="modal-title"><i class="fa fa-pause"></i> Manage Hold Dates - <span id="holdCustomerName"></span></h5>
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="holdCustomerId">
        <div id="holdLoading" class="text-center py-3"><div class="spinner-border text-warning"></div></div>
        <div id="holdContent" style="display:none;">
          <h6 class="mb-3"><i class="fa fa-calendar-check text-warning"></i> Upcoming Hold Dates</h6>
          <div id="holdFutureDatesList"></div>
          <hr>
          <h6 class="mb-3"><i class="fa fa-history text-secondary"></i> Past Hold Dates</h6>
          <div id="holdPastDatesList"></div>
          <hr>
          <h6 class="mb-3"><i class="fa fa-plus-circle text-success"></i> Add New Hold Date</h6>
          <div class="input-group mb-3">
            <input type="date" class="form-control" id="newHoldDate" min="{{ date('Y-m-d') }}">
            <button class="btn btn-warning" type="button" onclick="addHoldDate()"><i class="fa fa-plus"></i> Add</button>
          </div>
        </div>
      </div>
      <div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button></div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
  $('#customerTable').DataTable({
    order: [[0, 'asc']],
    pageLength: 25,
    responsive: false,
    dom: 'Bfrtip',
    buttons: [{
      extend: 'excelHtml5',
      text: '<i class="fa fa-file-excel"></i> Export Excel',
      className: 'btn btn-success btn-sm',
      title: 'Customer Delivery Status',
      exportOptions: { columns: [0, 1, 2, 3, 4, 5, 6, 7, 8] }
    }]
  });
});

function formatDate(ymd) {
  if (!ymd) return '-';
  var p = ymd.split('-');
  return p[2] + '-' + p[1] + '-' + p[0];
}

function viewBoxes(custId, custName) {
  $('#boxesCustomerName').text(custName);
  $('#boxesLoading').show();
  $('#boxesContent, #boxesError').hide();
  $('#boxesModal').modal('show');

  $.ajax({
    url: "{{ route('admin.delivery-status.boxes') }}",
    type: 'GET',
    dataType: 'json',
    data: { customer_id: custId },
    success: function(res) {
      $('#boxesLoading').hide();
      if (res.status === 'success' && res.data) {
        $('#boxesPkgStart').text(formatDate(res.data.pkg_start_date));
        $('#boxesPkgEnd').text(formatDate(res.data.pkg_end_date));
        $('#boxesExtendedEnd').text(res.data.extended_end_date !== res.data.pkg_end_date ? formatDate(res.data.extended_end_date) : '-');
        var summary = 'Delivered: ' + res.data.delivered_count + ' / ' + res.data.total_days;
        if (res.data.hold_count > 0) summary += ' | Hold: ' + res.data.hold_count + ' (Extended)';
        if (res.data.sunday_count > 0) summary += ' | Sundays: ' + res.data.sunday_count;
        $('#boxesSummary').text(summary);
        var html = '';
        (res.data.boxes || []).forEach(function(b) {
          html += '<div class="delivery-box ' + b.type + '" title="' + formatDate(b.date) + '">' + b.label + '</div>';
        });
        $('#boxesContainer').html(html);
        $('#boxesContent').show();
      } else {
        $('#boxesError').text(res.message || 'Could not load boxes.').show();
      }
    },
    error: function() { $('#boxesLoading').hide(); $('#boxesError').text('Server error.').show(); }
  });
}

function manageHold(custId, custName) {
  $('#holdCustomerName').text(custName);
  $('#holdCustomerId').val(custId);
  $('#holdLoading').show();
  $('#holdContent').hide();
  $('#holdModal').modal('show');
  loadHoldDates(custId);
}

function loadHoldDates(custId) {
  $.ajax({
    url: "{{ route('admin.delivery-status.hold-dates') }}",
    type: 'GET',
    dataType: 'json',
    data: { customer_id: custId },
    success: function(res) {
      $('#holdLoading').hide();
      if (res.status === 'success') {
        var futureHtml = '';
        var pastHtml = '';
        var futureDates = res.dates && res.dates.future ? res.dates.future : [];
        var pastDates = res.dates && res.dates.past ? res.dates.past : [];

        if (futureDates.length > 0) {
          futureDates.forEach(function(d) {
            futureHtml += '<div class="hold-date-item"><span class="date-text">' + formatDate(d) + '</span><button class="btn-delete" onclick="deleteHoldDate(' + custId + ', \'' + d + '\')"><i class="fa fa-trash"></i></button></div>';
          });
        } else {
          futureHtml = '<p class="text-muted">No upcoming hold dates.</p>';
        }

        if (pastDates.length > 0) {
          pastDates.forEach(function(d) {
            pastHtml += '<div class="hold-date-item past-hold"><span class="date-text">' + formatDate(d) + '</span><span class="badge bg-secondary">Past</span></div>';
          });
        } else {
          pastHtml = '<p class="text-muted">No past hold dates.</p>';
        }

        $('#holdFutureDatesList').html(futureHtml);
        $('#holdPastDatesList').html(pastHtml);
        $('#holdContent').show();
      }
    }
  });
}

function addHoldDate() {
  var custId = $('#holdCustomerId').val();
  var holdDate = $('#newHoldDate').val();
  if (!holdDate) { alert('Please select a date.'); return; }

  $.ajax({
    url: "{{ route('admin.delivery-status.hold-dates.store') }}",
    type: 'POST',
    dataType: 'json',
    data: { _token: "{{ csrf_token() }}", customer_id: custId, hold_date: holdDate },
    success: function(res) {
      if (res.status === 'success') {
        $('#newHoldDate').val('');
        loadHoldDates(custId);
        alert(res.message);
      } else {
        alert(res.message);
      }
    }
  });
}

function deleteHoldDate(custId, holdDate) {
  if (!confirm('Delete this hold date?')) return;

  $.ajax({
    url: "{{ route('admin.delivery-status.hold-dates.destroy') }}",
    type: 'POST',
    dataType: 'json',
    data: { _token: "{{ csrf_token() }}", _method: 'DELETE', customer_id: custId, hold_date: holdDate },
    success: function(res) {
      if (res.status === 'success') {
        loadHoldDates(custId);
        alert(res.message);
      } else {
        alert(res.message);
      }
    }
  });
}
</script>
@endpush