@extends('Admin.layout')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="d-flex justify-content-between align-items-center mb-3">

        <div class="d-flex justify-content-between align-items-center ">
            <a href="{{ route('products') }}" class="me-2">
                <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g filter="url(#filter0_d_656_26227)">
                        <rect x="10" y="1" width="44" height="44" rx="10" fill="white"
                            shape-rendering="crispEdges" />
                        <path d="M34 18L29 23L34 28" stroke="#292460" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </g>
                    <defs>
                        <filter id="filter0_d_656_26227" x="0" y="0" width="64" height="64"
                            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                            <feFlood flood-opacity="0" result="BackgroundImageFix" />
                            <feColorMatrix in="SourceAlpha" type="matrix"
                                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                            <feMorphology radius="2" operator="erode" in="SourceAlpha"
                                result="effect1_dropShadow_656_26227" />
                            <feOffset dy="9" />
                            <feGaussianBlur stdDeviation="6" />
                            <feComposite in2="hardAlpha" operator="out" />
                            <feColorMatrix type="matrix"
                                values="0 0 0 0 0.399674 0 0 0 0 0.197743 0 0 0 0 0.558333 0 0 0 0.12 0" />
                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_656_26227" />
                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_656_26227"
                                result="shape" />
                        </filter>
                    </defs>
                </svg>
            </a>
            <h4 class="mb-0">Variant Details</h4>
        </div>

        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addVariantModal">
            Add Variant
        </button>
    </div>

    <p class="mb-1"><strong>Category :</strong>{{ $product->category_name }}</p>
    <p><strong>Product Name :</strong> {{ $product->product_name }}</p>

    <div class="card p-4 mt-3">


        <div class="table-responsive">
            <table id="products" class="table table-bordered align-middle">
                <thead class="table-light">
                    <tr>
                        <th>SNO</th>
                        <th class="no-wrap">Date</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>
</div>


<div class="modal fade" id="addVariantModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <form id="addVariantForm" method="POST" action="{{ route('add_variant_form') }}">
            @csrf

            <input type="hidden" name="product_id" value="{{ $product->id }}">

            <div class="modal-content p-4">
                <h5 class="mb-3">Add Variant</h5>

                <div class="row g-3">
                    <div class="col-md-4">
                        <label>Unit Value</label>
                        <input type="text"
                            name="unit_value"
                            oninput="this.value = this.value.replace(/[^0-9.]/g, '');"
                            class="form-control"
                            value="{{old('unit_value')}}">
                        @error('unit_value')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="col-md-4">
                        <label>Unit</label>
                        <select name="unit" class="form-select">
                            <option value="">Select</option>
                            <option value="gm" {{ old('unit') == 'gm' ? 'selected' : '' }}>gm</option>
                            <option value="kg" {{ old('unit') == 'kg' ? 'selected' : '' }}>kg</option>
                            <option value="box" {{ old('unit') == 'box' ? 'selected' : '' }}>Box</option>
                            <option value="piece" {{ old('unit') == 'piece' ? 'selected' : '' }}>Piece</option>

                        </select>
                        @error('unit')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="col-md-4">
                        <label>MRP</label>
                        <input type="text"
                            name="mrp"
                            oninput="this.value = this.value.replace(/[^0-9.]/g, '');"
                            value="{{ old('mrp') }}"
                            class="form-control">
                        @error('mrp')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="col-md-4">
                        <label>Price</label>
                        <input type="text"
                            name="selling_price"
                            oninput="this.value = this.value.replace(/[^0-9.]/g, '');"
                            value="{{ old('selling_price') }}"
                            class="form-control">
                        @error('selling_price')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>


                    <div class="col-md-4">
                        <label>Stock</label>
                        <input type="text"
                            name="stock"
                            oninput="this.value = this.value.replace(/[^0-9.]/g, '');"
                            value="{{ old('stock') }}"
                            class="form-control">
                        @error('stock')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="col-md-4">
                        <label>Display</label>
                        <select name="display" class="form-select">
                            <option value="">Select</option>
                            <option value="1" {{ old('display') == '1' ? 'selected' : '' }}>Yes</option>
                            <option value="0" {{ old('display') == '0' ? 'selected' : '' }}>No</option>
                        </select>
                        @error('display')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror

                    </div>
                </div>

                <div class="d-flex justify-content-center gap-3 mt-4">
                    <button type="submit" class="btn btn-primary px-5" onclick="this.disabled=true; this.form.submit();">Submit</button>
                    <button type="button" class="btn btn-secondary px-5" data-bs-dismiss="modal">
                        Discard
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="EditVariantModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <form id="editVariantForm" method="POST" action="{{ route('edit_variant_form') }}">
            @csrf
            <input type="hidden" name="variant_id" id="edit_variant_id">
            <div class="modal-content p-4">
                <h5 class="mb-3">Edit Variant</h5>

                <div class="row g-3">
                    <div class="col-md-4">
                        <label>Unit Value</label>
                        <input type="text"
                            name="unit_value"
                            oninput="this.value = this.value.replace(/[^0-9.]/g, '');"
                            class="form-control">
                    </div>

                    <div class="col-md-4">
                        <label>Unit</label>
                        <select name="unit" class="form-select">
                            <option value="">Select</option>
                            <option value="gm">gm</option>
                            <option value="kg">kg</option>
                                  <option value="box">Box</option>
                                        <option value="box">Piece</option>
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label>MRP</label>
                        <input type="text" name="mrp"
                            oninput="this.value = this.value.replace(/[^0-9.]/g, '');"
                            class="form-control">
                    </div>

                    <div class="col-md-4">
                        <label>Price</label>
                        <input type="text" name="selling_price"
                            oninput="this.value = this.value.replace(/[^0-9.]/g, '');"
                            class="form-control">
                    </div>

                    <div class="col-md-4">
                        <label>Stock</label>
                        <input type="text" name="stock"
                            oninput="this.value = this.value.replace(/[^0-9.]/g, '');"
                            class="form-control">
                    </div>

                    <div class="col-md-4">
                        <label>Display</label>
                        <select name="display" class="form-select">
                            <option value="1">Yes</option>
                            <option value="0">No</option>
                        </select>
                    </div>
                </div>

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


{{-- Delete Modal --}}
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content text-center p-8">
            <h4>Are you sure?</h4>
            <p class="text-muted">Do you really want to delete this Variant?</p>
            <form id="DeleteForm" method="POST" action="{{ route('delete_variant') }}">
                @csrf
                <input type="hidden" name="id" id="variant_id">
                <div class="d-flex justify-content-center gap-3 mt-3">
                    <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" class="btn btn-danger p-3 ms-2 fw-semibold" id="submit_btn">
                        Yes, Sure
                    </button>
                </div>
        </div>
    </div>
</div>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script>
    $(function() {
        $('#products').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('variant_details_data', ['product_id' => $product->id]) }}",
            columns: [{
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'unit_value',
                    name: 'unit_value'
                },
                {
                    data: 'unit',
                    name: 'unit'
                },
                {
                    data: 'mrp',
                    name: 'mrp'
                },
                {
                    data: 'selling_price',
                    name: 'selling_price'
                },
                {
                    data: 'stock',
                    name: 'stock'
                },
                {
                    data: 'display',
                    name: 'display'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ],

            order: [
                [1, 'asc']
            ],
            pageLength: 10,
            lengthMenu: [5, 10, 25, 50],
            language: {
                search: "",
                searchPlaceholder: "Search ",
                lengthMenu: "_MENU_"
            }
        });
    });
</script>
<script>
    //add
    document.getElementById('addVariantForm').addEventListener('submit', function() {
        const btn = document.getElementById('submitBtn');
        btn.disabled = true;
        btn.innerText = 'Submitting...';
    });


    //edit
    const EditVariantModal = document.getElementById('EditVariantModal');
    const editForm = document.getElementById('editVariantForm');
    const submitBtn = editForm.querySelector('button[type="submit"]');

    EditVariantModal.addEventListener('show.bs.modal', function(event) {
        const button = event.relatedTarget;
        const variantId = button.getAttribute('data-id');

        document.getElementById('edit_variant_id').value = variantId;

        fetch(`/admin/variant/${variantId}`)
            .then(res => res.json())
            .then(res => {
                const v = res.data;
                if (!v) return;

                const modal = EditVariantModal;

                modal.querySelector('[name="unit_value"]').value = v.unit_value ?? '';
                modal.querySelector('[name="unit"]').value = v.unit ?? '';
                modal.querySelector('[name="mrp"]').value = v.mrp ?? '';
                modal.querySelector('[name="selling_price"]').value = v.selling_price ?? '';
                modal.querySelector('[name="stock"]').value = v.stock ?? '';
                modal.querySelector('[name="display"]').value = v.display ?? '';

                submitBtn.disabled = false;
                submitBtn.innerText = 'Submit';
            })
            .catch(err => console.error('Fetch error:', err));
    });

    editForm.addEventListener('submit', function(e) {
        if (submitBtn.disabled) {
            e.preventDefault();
            return;
        }

        submitBtn.disabled = true;
        submitBtn.innerText = 'Submitting...';
    });


    //delete
    function setDeleteId(button) {
        document.getElementById('variant_id').value = button.getAttribute('data-id');
    }

    document.getElementById('DeleteForm').addEventListener('submit', function() {
        const btn = document.getElementById('submit_delete');
        btn.disabled = true;
        btn.innerText = 'Deleting...';
    });
</script>
@if ($errors->any())
<script>
    document.addEventListener("DOMContentLoaded", function () {
        let addModal = new bootstrap.Modal(document.getElementById('addVariantModal'));
        addModal.show();
    });
</script>
@endif

@endsection