@extends('Admin.layout')

@section('title', 'Products')

@section('content')


    <div class="container-xxl flex-grow-1 container-p-y">

        {{-- PAGE HEADER --}}
        <div class="d-flex justify-content-between align-items-center mb-4">

            <h4 class="fw-bold mb-0">
                Products
            </h4>

            <a href="{{ route('product_create') }}" class="btn btn-primary">

                <i class="ti tabler-plus me-1"></i>
                Add Product

            </a>

        </div>


        {{-- PRODUCT TABLE --}}
        <div class="card">

            <div class="table-responsive">

                <table id="productsTable" class="table table-bordered table-hover align-middle">

                    <thead>

                        <tr>

                            <th>S.No</th>

                            <th>Product ID</th>

                            <th>Date</th>

                            <th>Serial No</th>

                            <th>Category</th>

                            <th>Image</th>

                            <th>Product Name</th>

                            <th>Quantity</th>

                            <th>Description</th>

                            <th>Status</th>

                            <th>Buying Price</th>

                            <th>Selling Price</th>

                            <th>Action</th>

                        </tr>

                    </thead>

                    <tbody>
                    </tbody>

                </table>

            </div>

        </div>

    </div>


    {{-- ========================================================= --}}
    {{-- STOCK ADJUSTMENT MODAL --}}
    {{-- ========================================================= --}}

    <div class="modal fade" id="stockModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

        <div class="modal-dialog modal-dialog-centered">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title">
                        Stock Adjustment
                    </h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>

                </div>


                <form id="stockForm">

                    @csrf

                    <input type="hidden" name="product_id" id="stock_product_id">


                    <div class="modal-body">

                        {{-- PRODUCT --}}
                        <div class="mb-3">

                            <label class="form-label">
                                Product
                            </label>

                            <input type="text" id="stock_product_name" class="form-control" readonly>

                        </div>


                        {{-- CURRENT STOCK --}}
                        <div class="mb-3">

                            <label class="form-label">
                                Current Stock
                            </label>

                            <input type="text" id="current_stock" class="form-control fw-bold" readonly>

                        </div>


                        {{-- STOCK TYPE --}}
                        <div class="mb-3">

                            <label class="form-label">
                                Stock Type
                            </label>

                            <div class="d-flex gap-4">

                                <div class="form-check">

                                    <input class="form-check-input" type="radio" name="type" id="stock_add"
                                        value="add" checked>

                                    <label class="form-check-label" for="stock_add">

                                        Add Stock

                                    </label>

                                </div>


                                <div class="form-check">

                                    <input class="form-check-input" type="radio" name="type" id="stock_reduce"
                                        value="reduce">

                                    <label class="form-check-label" for="stock_reduce">

                                        Reduce Stock

                                    </label>

                                </div>

                            </div>

                        </div>


                        {{-- QUANTITY --}}
                        <div class="mb-3">

                            <label class="form-label">

                                Quantity



                            </label>

                            <input type="number" name="quantity" id="stock_quantity" class="form-control" min="1">

                        </div>


                        {{-- REASON --}}
                        <div class="mb-3">

                            <label class="form-label">

                                Reason



                            </label>

                            <input type="text" name="reason" id="stock_reason" class="form-control"
                                placeholder="Enter reason" maxlength="255">

                        </div>


                        {{-- REMARK --}}
                        <div class="mb-3">

                            <label class="form-label">
                                Remark
                            </label>

                            <textarea name="remark" id="stock_remark" class="form-control" rows="3" placeholder="Enter remark (optional)"
                                maxlength="1000"></textarea>

                        </div>

                    </div>


                    <div class="modal-footer">

                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">

                            Cancel

                        </button>


                        <button type="submit" class="btn btn-primary" id="saveStockBtn">

                            <span id="saveStockText">
                                Save
                            </span>

                            <span id="saveStockLoader" class="d-none">

                                <span class="spinner-border spinner-border-sm me-1" role="status">
                                </span>

                                Saving...

                            </span>

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>


    {{-- ========================================================= --}}
    {{-- STATUS MODAL --}}
    {{-- ========================================================= --}}


    <div class="modal fade" id="statusModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

        <div class="modal-dialog modal-sm modal-dialog-centered">

            <div class="modal-content rounded-4 text-center p-4 py-5">

                <h5 class="fw-bold mb-2">
                    Change Status
                </h5>

                <p class="text-muted mb-0" id="statusMessage">

                    Are you sure you want to change status?

                </p>

                <form action="{{ route('update_product_status') }}" method="POST" id="statusForm">

                    @csrf

                    <input type="hidden" name="id" id="status_product_id">

                    <input type="hidden" name="status" id="status_value">

                    <div class="d-flex justify-content-center align-items-center gap-3 mt-4">

                        <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal"
                            id="cancelStatusChange">

                            Cancel

                        </button>

                        <button type="submit" class="btn btn-success p-3 fw-semibold" id="confirmStatusChange">

                            Yes, Change

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>




    {{-- ========================================================= --}}
    {{-- DELETE MODAL --}}
    {{-- ========================================================= --}}

    <div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title">
                        Delete Product
                    </h5>


                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>

                </div>


                <div class="modal-body">

                    Are you sure you want to delete this product?

                </div>


                <div class="modal-footer">

                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">

                        Cancel

                    </button>


                    <form id="deleteProductForm" action="{{ route('product_delete') }}" method="POST">

                        @csrf


                        <input type="hidden" name="product_id" id="delete_product_id">


                        <button type="submit" id="deleteProductBtn" class="btn btn-danger">

                            <span class="deleteProductText">
                                Delete
                            </span>


                            <span class="deleteProductLoader d-none">

                                <span class="spinner-border spinner-border-sm me-1" role="status">
                                </span>

                                Deleting...

                            </span>

                        </button>

                    </form>

                </div>

            </div>

        </div>

    </div>

    {{-- ========================================================= --}}
    {{-- IMAGE PREVIEW MODAL --}}
    {{-- ========================================================= --}}

    <div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered modal-lg">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title" id="imagePreviewTitle">
                        Product Image
                    </h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>

                </div>

                <div class="modal-body text-center">

                    <img id="previewProductImage" src="" alt="Product Image" class="img-fluid rounded"
                        style="max-height: 600px;">

                </div>

            </div>

        </div>

    </div>


@endsection

@section('scripts')

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

            $('#productsTable').DataTable({

                processing: true,

                serverSide: false,

                responsive: false,

                pageLength: 10,

                columnDefs: [

                    {
                        targets: '_all',
                        className: 'text-nowrap'
                    }

                ],

                lengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],

                ajax: {

                    url: "{{ route('product_data') }}",

                    type: "GET",

                    error: function(xhr) {

                        console.error(
                            'Product Data Error:',
                            xhr.responseText
                        );

                    }

                },

                order: [
                    [1, 'desc']
                ],

                columns: [

                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'product_id',
                        name: 'product_id'
                    },

                    {
                        data: 'created_at',
                        name: 'created_at',
                        className: 'text-nowrap',
                        width: '140px'
                    },
                    {
                        data: 'serial_no',
                        name: 'serial_no'
                    },

                    {
                        data: 'category',
                        name: 'category'
                    },

                    {
                        data: 'product_image',
                        name: 'product_image',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'name',
                        name: 'name'
                    },

                    {
                        data: 'quantity_action',
                        name: 'quantity_action',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'description',
                        name: 'description'
                    },

                    {
                        data: 'status',
                        name: 'status'
                    },

                    {
                        data: 'buying_price',
                        name: 'buying_price'
                    },

                    {
                        data: 'selling_price',
                        name: 'selling_price'
                    },

                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }

                ],


                language: {

                    lengthMenu: "_MENU_",

                    search: "",

                    searchPlaceholder: "Search...",
                    emptyTable: 'No products found'

                }

            });

        });


        /*
        |--------------------------------------------------------------------------
        | OPEN STOCK MODAL
        |--------------------------------------------------------------------------
        */

        function openStockModal(
            productId,
            productName,
            currentQuantity
        ) {

            $('#stockForm')[0].reset();

            $('#stock_product_id')
                .val(productId);

            $('#stock_product_name')
                .val(productName);

            $('#current_stock')
                .val(currentQuantity);

            $('#stock_add')
                .prop('checked', true);

            $('#stock_quantity')
                .val('');

            $('#stock_reason')
                .val('');

            $('#stock_remark')
                .val('');


            let modal =
                bootstrap.Modal.getOrCreateInstance(
                    document.getElementById('stockModal')
                );

            modal.show();

        }


        /*
        |--------------------------------------------------------------------------
        | SAVE STOCK
        |--------------------------------------------------------------------------
        */

        $('#stockForm').on(
            'submit',
            function(e) {

                e.preventDefault();


                let btn =
                    $('#saveStockBtn');


                if (btn.prop('disabled')) {

                    return;

                }


                btn.prop('disabled', true);


                $('#saveStockText')
                    .addClass('d-none');


                $('#saveStockLoader')
                    .removeClass('d-none');


                $.ajax({

                    url: "{{ route('update_stock') }}",

                    type: "POST",

                    data: $(this).serialize(),

                    success: function(response) {

                        if (response.status === true) {

                            let productId =
                                $('#stock_product_id').val();


                            $('#quantity_' + productId)
                                .text(response.quantity);


                            let modal =
                                bootstrap.Modal.getInstance(
                                    document.getElementById('stockModal')
                                );


                            if (modal) {

                                modal.hide();

                            }


                            $('#stockForm')[0].reset();


                            $('#productsTable')
                                .DataTable()
                                .ajax.reload(null, false);

                        } else {

                            alert(
                                response.message
                            );

                        }

                    },

                    error: function(xhr) {

                        let message =
                            'Something went wrong. Please try again.';


                        if (
                            xhr.responseJSON &&
                            xhr.responseJSON.message
                        ) {

                            message =
                                xhr.responseJSON.message;

                        }


                        alert(message);

                    },

                    complete: function() {

                        btn.prop(
                            'disabled',
                            false
                        );


                        $('#saveStockText')
                            .removeClass('d-none');


                        $('#saveStockLoader')
                            .addClass('d-none');

                    }

                });

            }
        );

        /*
        |--------------------------------------------------------------------------
        | PRODUCT IMAGE PREVIEW
        |--------------------------------------------------------------------------
        */

        $(document).on('click', '.viewProductImage', function(e) {

            e.preventDefault();

            let imageUrl = $(this).data('image');

            let imageTitle = $(this).data('title');

            $('#previewProductImage')
                .attr('src', imageUrl)
                .attr('alt', imageTitle);

            $('#imagePreviewTitle')
                .text(imageTitle);

            let modal = bootstrap.Modal.getOrCreateInstance(
                document.getElementById('imagePreviewModal')
            );

            modal.show();

        });

        /*
        |--------------------------------------------------------------------------
        | STATUS MODAL
        |--------------------------------------------------------------------------
        */

        $(document).on(
            'click',
            '.status-toggle',
            function(e) {

                e.preventDefault();


                let button =
                    $(this);


                let productId =
                    button.data('id');


                let currentStatus =
                    Number(
                        button.data('status')
                    );


                $('#status_product_id')
                    .val(productId);


                $('#status_value')
                    .val(
                        currentStatus === 1 ?
                        0 :
                        1
                    );


                if (currentStatus === 1) {

                    $('#statusMessage').text(
                        'Are you sure you want to deactivate this product?'
                    );


                    $('#confirmStatusChange')
                        .removeClass('btn-success')
                        .addClass('btn-danger');

                } else {

                    $('#statusMessage').text(
                        'Are you sure you want to activate this product?'
                    );


                    $('#confirmStatusChange')
                        .removeClass('btn-danger')
                        .addClass('btn-success');

                }


                let modal =
                    bootstrap.Modal.getOrCreateInstance(
                        document.getElementById('statusModal')
                    );


                modal.show();

            }
        );

        // double tap prevention ststus modal
        $('#statusForm').on('submit', function(e) {

            let form = $(this);

            let button = $('#confirmStatusChange');

            if (button.prop('disabled')) {
                e.preventDefault();
                return false;
            }

            button.prop('disabled', true);

            button
                .removeClass('btn-success btn-danger')
                .addClass('btn-secondary');

            button.html(
                '<span class="spinner-border spinner-border-sm me-2" role="status"></span> Processing...'
            );

            $('#cancelStatusChange').prop('disabled', true);

        });



        /*
        |--------------------------------------------------------------------------
        | DELETE MODAL
        |--------------------------------------------------------------------------
        */

        function openDeleteModal(productId) {

            $('#delete_product_id')
                .val(productId);


            let modal =
                bootstrap.Modal.getOrCreateInstance(
                    document.getElementById('deleteModal')
                );


            modal.show();

        }


        /*
        |--------------------------------------------------------------------------
        | DELETE DOUBLE SUBMIT PREVENTION
        |--------------------------------------------------------------------------
        */

        $('#deleteProductForm').on(
            'submit',
            function(e) {

                let btn =
                    $('#deleteProductBtn');


                if (btn.prop('disabled')) {

                    e.preventDefault();

                    return false;

                }


                btn.prop(
                    'disabled',
                    true
                );


                $('.deleteProductText')
                    .addClass('d-none');


                $('.deleteProductLoader')
                    .removeClass('d-none');

            }
        );
    </script>

@endsection