@extends('layouts.admin-master')
@section('title', 'Master Rate Card')
@section('style')
    @include('admin.style')
    <style>
        /* ── Modal form polish ── */
        .rate-modal .modal-content {
            border: none;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0,0,0,.18);
        }
        .rate-modal .modal-header {
            background: linear-gradient(135deg, #365CF5 0%, #2541b2 100%);
            border-radius: 16px 16px 0 0;
            padding: 20px 28px;
        }
        .rate-modal .modal-title { color: #fff; font-weight: 700; font-size: 16px; }
        .rate-modal .btn-close { filter: invert(1); opacity: .8; }
        .rate-modal .modal-body { padding: 28px; max-height: 60vh; overflow-y: auto; }
        .rate-modal .modal-footer { padding: 16px 28px 24px; border-top: 1px solid #f0f0f0; background: #fff; border-radius: 0 0 16px 16px; }

        /* ── Form field style ── */
        .rate-field label {
            font-size: 12px;
            font-weight: 600;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: .4px;
            margin-bottom: 6px;
            display: block;
        }
        .rate-field select,
        .rate-field input[type="number"],
        .rate-field input[type="date"] {
            width: 100%;
            height: 42px;
            border: 1.5px solid #e5e7eb;
            border-radius: 10px;
            padding: 0 14px;
            font-size: 13px;
            color: #111;
            background: #fafafa;
            transition: border-color .2s, box-shadow .2s;
            outline: none;
            appearance: auto;
        }
        .rate-field select:focus,
        .rate-field input:focus {
            border-color: #365CF5;
            box-shadow: 0 0 0 3px rgba(54,92,245,.1);
            background: #fff;
        }
        .rate-field { margin-bottom: 18px; }

        /* ── Section divider label ── */
        .form-section-label {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .6px;
            color: #9ca3af;
            margin: 4px 0 14px;
            padding-bottom: 6px;
            border-bottom: 1px solid #f3f4f6;
        }

        /* ── Active checkbox ── */
        .rate-check { display: flex; align-items: center; gap: 10px; }
        .rate-check input[type=checkbox] {
            width: 18px; height: 18px;
            accent-color: #365CF5;
            cursor: pointer;
        }
        .rate-check label { font-size: 13px; font-weight: 500; color: #374151; cursor: pointer; margin: 0; }

        /* ── Save button ── */
        .btn-save-rate {
            background: linear-gradient(135deg, #365CF5, #2541b2);
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 10px 28px;
            font-size: 13px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: opacity .2s, transform .15s;
        }
        .btn-save-rate:hover { opacity: .9; transform: translateY(-1px); color: #fff; }
        .btn-cancel-rate {
            background: #f3f4f6;
            color: #374151;
            border: none;
            border-radius: 10px;
            padding: 10px 24px;
            font-size: 13px;
            font-weight: 500;
        }
        .btn-cancel-rate:hover { background: #e5e7eb; }

        /* ── Table action area ── */
        .rate-action { display: flex; gap: 6px; justify-content: flex-end; }
    </style>
@endsection

@section('content')
<aside class="sidebar-nav-wrapper">@include('admin.sidenav')</aside>
<div class="overlay"></div>

<main class="main-wrapper">
    @include('admin.header')

    <section class="section">
        <div class="container-fluid">

            <div class="title-wrapper pt-30">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="title"><h2>Master Rate Card</h2></div>
                  
                    </div>
                    <div class="col-md-6"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div class="card-style mb-30">

                        {{-- Toolbar --}}
                        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-20">
                            <h6 class="text-medium mb-0">Master Rate Cards</h6>
                            <div class="d-flex gap-2 align-items-center">
                                <select id="filterStatus" class="form-select form-select-sm" style="min-width:130px;font-size:13px;">
                                    <option value="">All Status</option>
                                    <option value="1" {{ request('status')=='1' ? 'selected':'' }}>Active</option>
                                    <option value="0" {{ request('status')=='0' ? 'selected':'' }}>Inactive</option>
                                </select>
                                <button type="button" style="width: 200px;" class="btn btn-primary btn-sm d-flex align-items-center gap-1"
                                    data-bs-toggle="modal" data-bs-target="#createRateCardModal"
                                    style="border-radius:8px;font-size:13px;padding:7px 16px;">
                                    <i class="lni lni-plus"></i> Add more
                                </button>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table top-selling-table">
                                <thead>
                                    <tr>
                                        <th><h6 class="text-sm text-medium">#</h6></th>
                                        <th><h6 class="text-sm text-medium">APMC</h6></th>
                                        <th><h6 class="text-sm text-medium">Crop</h6></th>
                                        <th><h6 class="text-sm text-medium">Rate Range (₹)</h6></th>
                                        <th><h6 class="text-sm text-medium">Unit</h6></th>
                                        <th><h6 class="text-sm text-medium">Effective Date</h6></th>
                                        <th><h6 class="text-sm text-medium">Status</h6></th>
                                        <th class="text-end"><h6 class="text-sm text-medium">Actions</h6></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($masterRateCards as $index => $rate)
                                    <tr>
                                        <td class="text-sm">{{ ($masterRateCards->firstItem() ?? 1) + $index }}</td>
                                        <td class="text-sm">{{ $rate->apmc->apmc_name ?? '—' }}</td>
                                        <td>
                                            <p class="text-sm fw-500 mb-0">{{ $rate->crop->crop_name ?? '—' }}</p>
                                        </td>
                                        <td>
                                            <span class="text-sm">
                                                <strong>₹{{ number_format($rate->min_rate, 2) }}</strong>
                                                <span class="text-gray">–</span>
                                                <strong>₹{{ number_format($rate->max_rate, 2) }}</strong>
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge-status badge-active">{{ $rate->unit->short_code ?? '—' }}</span>
                                        </td>
                                        <td class="text-sm">
                                            {{ \Carbon\Carbon::parse($rate->effective_from)->format('d M, Y') }}
                                            @if($rate->effective_to)
                                                <br><small class="text-muted">to {{ \Carbon\Carbon::parse($rate->effective_to)->format('d M, Y') }}</small>
                                            @endif
                                        </td>
                                        <td>
                                            @if($rate->is_active)
                                                <span class="badge-status badge-verified">Active</span>
                                            @else
                                                <span class="badge-status badge-rejected">Inactive</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="rate-action">
                                                <button type="button" class="action-btn view" title="View"
                                                    data-bs-toggle="modal" data-bs-target="#viewRateCardModal"
                                                    onclick="showRateCard(this)"
                                                    data-apmc="{{ $rate->apmc->apmc_name ?? '—' }}"
                                                    data-crop="{{ $rate->crop->crop_name ?? '—' }}"
                                                    data-min="{{ number_format($rate->min_rate, 2) }}"
                                                    data-max="{{ number_format($rate->max_rate, 2) }}"
                                                    data-unit="{{ $rate->unit->unit_name ?? '—' }}{{ optional($rate->unit)->short_code ? ' ('.$rate->unit->short_code.')' : '' }}"
                                                    data-from="{{ \Carbon\Carbon::parse($rate->effective_from)->format('d M, Y') }}"
                                                    data-to="{{ $rate->effective_to ? \Carbon\Carbon::parse($rate->effective_to)->format('d M, Y') : '—' }}"
                                                    data-status="{{ $rate->is_active ? 'Active' : 'Inactive' }}">
                                                    <i class="lni lni-eye"></i>
                                                </button>
                                                <a href="{{ route('master-rate.edit', $rate->id) }}" class="action-btn edit" title="Edit">
                                                    <i class="lni lni-pencil"></i>
                                                </a>
                                                <button type="button" class="action-btn view" title="Update History"
                                                    data-bs-toggle="modal" data-bs-target="#historyRateCardModal"
                                                    onclick="loadRateHistory({{ $rate->id }})">
                                                    <i class="lni lni-timer"></i>
                                                </button>
                                                <form action="{{ route('master-rate.destroy', $rate->id) }}" method="POST"
                                                    data-confirm="Delete this rate card? This cannot be undone."
                                                    data-confirm-title="Delete Rate Card">
                                                    @csrf @method('DELETE')
                                                    <button type="submit" class="action-btn delete" title="Delete">
                                                        <i class="lni lni-trash-can"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="8" class="text-center py-5 text-muted">
                                            <i class="lni lni-bar-chart" style="font-size:32px;opacity:.3;"></i>
                                            <p class="mt-2 mb-0">No rate cards found</p>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        <div class="pt-10 d-flex justify-content-between align-items-center flex-wrap gap-2">
                            <p class="text-sm text-gray mb-0">
                                Showing {{ $masterRateCards->firstItem() ?? 0 }} – {{ $masterRateCards->lastItem() ?? 0 }}
                                of {{ $masterRateCards->total() }} entries
                            </p>
                            {{ $masterRateCards->links('pagination::bootstrap-4') }}
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </section>

    @include('admin.footer')
</main>

{{-- ═══════════════════════════════════════════════
     Add New Rate Card Modal — Professional Design
═══════════════════════════════════════════════ --}}
<div class="modal fade rate-modal" id="createRateCardModal" tabindex="-1"
    aria-labelledby="createRateCardModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <div class="d-flex align-items-center gap-2">
                    <div style="width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;">
                        <i class="lni lni-bar-chart" style="color:#fff;font-size:16px;"></i>
                    </div>
                    <h5 class="modal-title mb-0" id="createRateCardModalLabel">Add New Rate Card</h5>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form id="createRateCardForm" action="{{ route('master-rate.store') }}" method="POST">
                @csrf
                <div class="modal-body">

                    <p class="form-section-label">Location & Parties</p>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="rate-field">
                                <label>APMC <span class="text-danger">*</span></label>
                                <select name="apmc_id" required>
                                    <option value="" disabled selected>Select APMC</option>
                                    @foreach ($apmcs as $apmc)
                                        <option value="{{ $apmc->id }}">{{ $apmc->apmc_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="rate-field">
                                <label>Vendor <span class="text-danger">*</span></label>
                                <select name="vendor_id" required>
                                    <option value="" disabled selected>Select Vendor</option>
                                    @foreach ($vendors as $vendor)
                                        <option value="{{ $vendor->id }}">{{ $vendor->vendor_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <p class="form-section-label">Crop & Unit</p>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="rate-field">
                                <label>Crop <span class="text-danger">*</span></label>
                                <select name="crop_id" class="select2-crop" required>
                                    <option value="" disabled selected>Search or select crop</option>
                                    @foreach ($crops as $crop)
                                        <option value="{{ $crop->id }}">{{ $crop->crop_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="rate-field">
                                <label>Unit <span class="text-danger">*</span></label>
                                <select name="measure_unit_id" class="select2-unit" required>
                                    <option value="" disabled selected>Search or select unit</option>
                                    @foreach ($units as $unit)
                                        <option value="{{ $unit->id }}">{{ $unit->unit_name }} ({{ $unit->short_code }})</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <p class="form-section-label">Rate & Dates</p>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="rate-field">
                                <label>Minimum Rate (₹) <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" min="0" name="min_rate"
                                    id="min_rate" placeholder="0.00" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="rate-field">
                                <label>Maximum Rate (₹) <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" min="0" name="max_rate"
                                    id="max_rate" placeholder="0.00" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="rate-field">
                                <label>Effective From <span class="text-danger">*</span></label>
                                <input type="date" name="effective_from" id="effective_from" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="rate-field">
                                <label>Effective To <span class="text-muted">(optional)</span></label>
                                <input type="date" name="effective_to" id="effective_to">
                            </div>
                        </div>
                    </div>

                    <div class="rate-check">
                        <input class="form-check-input" type="checkbox" name="is_active"
                            value="1" id="is_active" checked>
                        <label for="is_active">Mark as Active Rate Card</label>
                    </div>

                </div>

                <div class="modal-footer justify-content-end gap-2">
                    <button type="button" class="btn-cancel-rate" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn-save-rate">
                        <i class="lni lni-save"></i> Save Rate Card
                    </button>
                </div>
            </form>

        </div>
    </div>
</div>

{{-- ═══════════════════════════════════════════════
     View Rate Card Modal (read-only)
═══════════════════════════════════════════════ --}}
<div class="modal fade rate-modal" id="viewRateCardModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <div class="d-flex align-items-center gap-2">
                    <div style="width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;">
                        <i class="lni lni-eye" style="color:#fff;font-size:16px;"></i>
                    </div>
                    <h5 class="modal-title mb-0">Rate Card Details</h5>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <table class="table mb-0">
                    <tbody>
                        <tr>
                            <td class="text-gray text-sm" style="width:45%;">APMC</td>
                            <td class="text-sm fw-500" id="view-apmc">—</td>
                        </tr>
                        <tr>
                            <td class="text-gray text-sm">Crop</td>
                            <td class="text-sm fw-500" id="view-crop">—</td>
                        </tr>
                        <tr>
                            <td class="text-gray text-sm">Rate Range (₹)</td>
                            <td class="text-sm fw-500" id="view-rate">—</td>
                        </tr>
                        <tr>
                            <td class="text-gray text-sm">Unit</td>
                            <td class="text-sm fw-500" id="view-unit">—</td>
                        </tr>
                        <tr>
                            <td class="text-gray text-sm">Effective From</td>
                            <td class="text-sm fw-500" id="view-from">—</td>
                        </tr>
                        <tr>
                            <td class="text-gray text-sm">Effective To</td>
                            <td class="text-sm fw-500" id="view-to">—</td>
                        </tr>
                        <tr>
                            <td class="text-gray text-sm">Status</td>
                            <td id="view-status">—</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="modal-footer justify-content-end">
                <button type="button" class="btn-cancel-rate" data-bs-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>

{{-- ═══════════════════════════════════════════════
     Update History Modal — every vendor/admin update
═══════════════════════════════════════════════ --}}
<div class="modal fade rate-modal" id="historyRateCardModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <div class="d-flex align-items-center gap-2">
                    <div style="width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;">
                        <i class="lni lni-timer" style="color:#fff;font-size:16px;"></i>
                    </div>
                    <h5 class="modal-title mb-0">Rate Update History <span id="history-crop-label" class="fw-normal" style="opacity:.85;"></span></h5>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table mb-0">
                        <thead>
                            <tr>
                                <th class="text-sm text-medium">#</th>
                                <th class="text-sm text-medium">Updated By</th>
                                <th class="text-sm text-medium">Source</th>
                                <th class="text-sm text-medium">Old Rate (₹)</th>
                                <th class="text-sm text-medium">New Rate (₹)</th>
                                <th class="text-sm text-medium">Date &amp; Time</th>
                            </tr>
                        </thead>
                        <tbody id="history-body">
                            <tr><td colspan="6" class="text-center text-muted py-4">Loading…</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="modal-footer justify-content-end">
                <button type="button" class="btn-cancel-rate" data-bs-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>

@endsection

@section('script')
    @include('admin.script')
    <script>
        $(document).ready(function () {
            // Set today as default
            const today = new Date().toISOString().split('T')[0];
            $('#effective_from').val(today);

            // Status filter redirect
            $('#filterStatus').change(function () {
                const s = $(this).val();
                window.location.href = "{{ route('master-rate.index') }}" + (s !== '' ? '?status=' + s : '');
            });

            // Client-side validation
            $('#createRateCardForm').submit(function (e) {
                const min = parseFloat($('#min_rate').val());
                const max = parseFloat($('#max_rate').val());
                if (!isNaN(min) && !isNaN(max) && min >= max) {
                    e.preventDefault();
                    window.showToast && showToast('Maximum rate must be greater than minimum rate.', 'error');
                    $('#max_rate').focus();
                    return;
                }
                const from = $('#effective_from').val();
                const to   = $('#effective_to').val();
                if (to && to < from) {
                    e.preventDefault();
                    window.showToast && showToast('Effective To must be after Effective From.', 'error');
                    $('#effective_to').focus();
                }
            });

            // Reset on close
            $('#createRateCardModal').on('hidden.bs.modal', function () {
                $('#createRateCardForm')[0].reset();
                $('#effective_from').val(today);
            });

            // Auto-format decimals
            $('#min_rate, #max_rate').on('blur', function () {
                const v = parseFloat($(this).val());
                if (!isNaN(v)) $(this).val(v.toFixed(2));
            });
        });

        // Populate the View Rate Card modal from the clicked row
        function showRateCard(btn) {
            const d = btn.dataset;
            document.getElementById('view-apmc').textContent = d.apmc || '—';
            document.getElementById('view-crop').textContent = d.crop || '—';
            document.getElementById('view-rate').textContent = '₹' + d.min + ' – ₹' + d.max;
            document.getElementById('view-unit').textContent = d.unit || '—';
            document.getElementById('view-from').textContent = d.from || '—';
            document.getElementById('view-to').textContent = d.to || '—';

            const isActive = d.status === 'Active';
            document.getElementById('view-status').innerHTML =
                '<span class="badge-status ' + (isActive ? 'badge-verified' : 'badge-rejected') + '">' + d.status + '</span>';
        }

        // Load the update history for a rate card into the History modal.
        function loadRateHistory(id) {
            const body  = document.getElementById('history-body');
            const label = document.getElementById('history-crop-label');
            label.textContent = '';
            body.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-4">Loading…</td></tr>';

            const url = "{{ route('master-rate.history', ':id') }}".replace(':id', id);

            fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                .then(r => r.json())
                .then(res => {
                    if (!res.status) {
                        body.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-4">' + (res.message || 'Failed to load history.') + '</td></tr>';
                        return;
                    }

                    if (res.rate_card) {
                        label.textContent = '— ' + (res.rate_card.crop_name || '') +
                            (res.rate_card.apmc_name ? ' @ ' + res.rate_card.apmc_name : '');
                    }

                    if (!res.history || res.history.length === 0) {
                        body.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-4">No updates recorded yet.</td></tr>';
                        return;
                    }

                    const money = v => (v === null || v === undefined || v === '') ? '—' : '₹' + parseFloat(v).toFixed(2);
                    let rows = '';
                    res.history.forEach((h, i) => {
                        const oldRate = (h.old_min_rate === null && h.old_max_rate === null)
                            ? '<span class="text-muted">—</span>'
                            : money(h.old_min_rate) + ' – ' + money(h.old_max_rate);
                        const srcBadge = h.source === 'admin'
                            ? '<span class="badge-status badge-active">Admin</span>'
                            : '<span class="badge-status badge-verified">Vendor</span>';
                        rows +=
                            '<tr>' +
                                '<td class="text-sm">' + (i + 1) + '</td>' +
                                '<td class="text-sm fw-500">' + (h.updated_by || 'Unknown') + '</td>' +
                                '<td>' + srcBadge + '</td>' +
                                '<td class="text-sm">' + oldRate + '</td>' +
                                '<td class="text-sm fw-500">' + money(h.min_rate) + ' – ' + money(h.max_rate) + '</td>' +
                                '<td class="text-sm">' + (h.updated_at || '—') + '</td>' +
                            '</tr>';
                    });
                    body.innerHTML = rows;
                })
                .catch(() => {
                    body.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-4">Failed to load history.</td></tr>';
                });
        }
    </script>
@endsection