@extends('Kitchen.layout')

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

<style>
    .dt-search { display: none; }
    .is-invalid { border: 2px solid red !important; }
</style>

{{-- ── Header ── --}}
<div class="row align-items-center justify-content-between mb-3 mt-3">
    <div class="col-auto">
        <h5>
            <button type="button" class="btn btn-icon bg-white me-2"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('kitchen.product') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <path d="M15 6l-6 6l6 6"/>
                    </svg>
                </a>
            </button>
            Variant Details
        </h5>
        <p class="mb-0">Category: <strong>{{ $product->category?->category ?? '--' }}</strong></p>
        <p class="mb-0">Product: <strong>{{ $product->product_name }}</strong></p>
    </div>
</div>

{{-- ── Table ── --}}
<div class="card p-0 m-2">
    <div class="row mb-3 align-items-center p-3 g-2">
        <div class="col-1">
            <select id="pageLength" class="form-select">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
        </div>
        <div class="col-md-3 ms-auto">
            <input type="text" id="searchInput" class="form-control" placeholder="Search">
        </div>
    </div>

    <div class="table-responsive pt-0 pb-2">
        <table class="table" id="usersTable">
            <thead>
                <tr>
                    <th>Sno</th>
                    <th>Date</th>
                    <th>Variant Id</th>
                    <th>Unit Value</th>
                    <th>Unit</th>
                    <th>MRP</th>
                    <th>Price</th>
                    <th>Stock</th>
                    <th>Display</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<input type="hidden" id="delete_id">

{{-- ── Edit Modal ── --}}
<div class="modal fade" id="EditVariantModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content p-4">
            <form id="editVariantForm">
                @csrf
                <input type="hidden" name="variant_id" id="edit_variant_id">

                <h5 class="mb-3">Edit Variant</h5>

                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Unit Value</label>
                        <input type="text" name="unit_value" id="ev_unit_value"
                            class="form-control" placeholder="e.g. 500"
                            oninput="this.value=this.value.replace(/[^0-9.]/g,'')">
                        <small class="text-danger" id="ev_err_unit_value"></small>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Unit</label>
                        <select name="unit" id="ev_unit" class="form-select">
                            <option value="">Select</option>
                            <option value="gm">gm</option>
                            <option value="kg">kg</option>
                            <option value="ml">ml</option>
                            <option value="ltr">ltr</option>
                            <option value="pcs">pcs</option>
                            <option value="cup">cup</option>
                        </select>
                        <small class="text-danger" id="ev_err_unit"></small>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">MRP</label>
                        <input type="text" name="mrp" id="ev_mrp"
                            class="form-control" placeholder="300"
                            oninput="this.value=this.value.replace(/[^0-9.]/g,'')">
                        <small class="text-danger" id="ev_err_mrp"></small>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Price</label>
                        <input type="text" name="price" id="ev_price"
                            class="form-control" placeholder="250"
                            oninput="this.value=this.value.replace(/[^0-9.]/g,'')">
                        <small class="text-danger" id="ev_err_price"></small>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Stock</label>
                        <input type="text" name="stock" id="ev_stock"
                            class="form-control" placeholder="100"
                            oninput="this.value=this.value.replace(/[^0-9.]/g,'')">
                        <small class="text-danger" id="ev_err_stock"></small>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Display</label>
                        <select name="display" id="ev_display" class="form-select">
                            <option value="1">Yes</option>
                            <option value="0">No</option>
                        </select>
                        <small class="text-danger" id="ev_err_display"></small>
                    </div>
                </div>

                <div class="d-flex justify-content-center gap-3 mt-4">
                    <button type="button" class="btn btn-primary px-5" id="updateVariantBtn">
                        Update
                    </button>
                    <button type="button" class="btn btn-secondary px-5"
                        data-bs-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- ── Scripts ── --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>
$(document).ready(function () {

    const csrf      = $('meta[name="csrf-token"]').attr('content');
    const productId = {{ $product->product_id }};

    // ── Init DataTable ────────────────────────────────────────────────────────
    const table = $('#usersTable').DataTable({
    processing: true,
    ajax: {
        url: '{{ route("kitchen.kitchen_variantData") }}',
        type: 'GET',
        data: function (d) {
            d.id = productId;
        },
        dataSrc: 'data'
    },
    pageLength: 10,
    columns: [
        { data: 'sno' },
        { data: 'created_at' },
         { data: 'product_id' },
        { data: 'unit_value' },
        { data: 'unit' },
        { data: 'mrp' },
        { data: 'price' },
        { data: 'stock' },
        {
            data: 'display',
            render: function (d) {
                return d === 'Yes'
                    ? '<span class="badge bg-label-success">Yes</span>'
                    : '<span class="badge bg-label-danger">No</span>';
            }
        },
        {
            data: null,
            render: function (d) {
                return `
                    <i class="ti tabler-edit text-primary edit-variant-btn"
                        data-id="${d.id}"
                        data-unit_value="${d.unit_value}"
                        data-unit="${d.unit}"
                        data-mrp="${d.mrp}"
                        data-price="${d.price}"
                        data-stock="${d.stock}"
                        data-display="${d.display === 'Yes' ? 1 : 0}"
                        data-bs-toggle="modal"
                        data-bs-target="#EditVariantModal">
                    </i>

                    <i class="ti tabler-trash text-danger delete-variant-btn ms-2"
                        data-id="${d.id}"
                        data-bs-toggle="modal"
                        data-bs-target="#delete">
                    </i>
                `;
            }
        }
    ]
});

    // ── Search & Page Length ──────────────────────────────────────────────────
    $('#searchInput').on('keyup',  function () { table.search(this.value).draw(); });
    $('#pageLength').on('change',  function () { table.page.len($(this).val()).draw(); });

    // ── Open Edit Modal — Populate Fields ─────────────────────────────────────
    $(document).on('click', '.edit-variant-btn', function () {
        const d = $(this).data();
        $('#edit_variant_id').val(d.id);
        $('#ev_unit_value').val(d.unit_value);
        $('#ev_mrp').val(d.mrp);
        $('#ev_price').val(d.price);
        $('#ev_stock').val(d.stock);
        $('#ev_unit').val(d.unit);
        $('#ev_display').val(d.display);

        // Clear previous errors
        ['unit_value','unit','mrp','price','stock','display'].forEach(f => {
            $(`#ev_err_${f}`).text('');
            $(`#ev_${f}`).removeClass('is-invalid');
        });
    });

    // ── Update Variant ────────────────────────────────────────────────────────
    $('#updateVariantBtn').on('click', function () {
        const $btn         = $(this);
        const originalText = $btn.html();

        $btn.prop('disabled', true).html('Updating...');

        // Clear errors
        ['unit_value','unit','mrp','price','stock','display'].forEach(f => {
            $(`#ev_err_${f}`).text('');
            $(`#ev_${f}`).removeClass('is-invalid');
        });

        $.ajax({
            url:  '{{ route("kitchen.kitchen_updateVariant") }}',
            type: 'POST',
            data: {
                _token:     csrf,
                variant_id: $('#edit_variant_id').val(),
                unit_value: $('#ev_unit_value').val(),
                unit:       $('#ev_unit').val(),
                mrp:        $('#ev_mrp').val(),
                price:      $('#ev_price').val(),
                stock:      $('#ev_stock').val(),
                display:    $('#ev_display').val(),
            },

            success: function (res) {
                showToast(res.message, res.status ? 'bg-success' : 'bg-danger');
                if (res.status) {
                    $('#EditVariantModal').modal('hide');
                    table.ajax.reload(null, false);
                }
                $btn.prop('disabled', false).html(originalText);
            },

            error: function (xhr) {
                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors ?? {};
                    $.each(errors, function (key, msgs) {
                        $(`#ev_${key}`).addClass('is-invalid');
                        $(`#ev_err_${key}`).text(msgs[0]);
                    });
                    showToast('Please fix the errors.', 'bg-danger');
                } else {
                    showToast('Server error occurred.', 'bg-danger');
                }
                $btn.prop('disabled', false).html(originalText);
            }
        });
    });

    // ── Open Delete Modal ─────────────────────────────────────────────────────
    $(document).on('click', '.delete-variant-btn', function () {
        $('#delete_id').val($(this).data('id'));
    });

    // ── Confirm Delete ────────────────────────────────────────────────────────
    $('#confirmDelete').on('click', function () {
        const $btn = $(this);
        const id   = $('#delete_id').val();

        if (!id) { showToast('ID not found', 'bg-danger'); return; }

        $btn.prop('disabled', true).html('Deleting...');

        $.ajax({
            url:  '{{ route("kitchen.kitchen_deleteVariant") }}',
            type: 'POST',
            data: { id, _token: csrf },

            success: function (res) {
                showToast(res.message, res.status ? 'bg-success' : 'bg-danger');
                if (res.status) {
                    $('#delete').modal('hide');
                    table.ajax.reload(null, false);
                }
                $btn.prop('disabled', false).html('Yes, Sure');
            },

            error: function () {
                showToast('Delete failed', 'bg-danger');
                $btn.prop('disabled', false).html('Yes, Sure');
            }
        });
    });

    // ── Modal Backdrop Cleanup ────────────────────────────────────────────────
    $('#EditVariantModal, #delete').on('hidden.bs.modal', function () {
        $('body').removeClass('modal-open').css('padding-right', '');
        $('.modal-backdrop').remove();
    });

});
</script>

@endsection