@extends('Admin.layout')

@section('content')

    <style>
        /* =========================================================
                       GOLD CARD
                    ========================================================= */

        .gold-management-card {
            background: #19212c !important;
            border: 1px solid rgba(218, 184, 91, 0.35) !important;
            border-radius: 18px !important;
        }


        /* =========================================================
                       TABLE WRAPPER
                    ========================================================= */

        .gold-table-wrapper {
            width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
        }


        /* =========================================================
                       TABLE
                    ========================================================= */

        #goldManagementTable {
            width: 100% !important;
            table-layout: fixed !important;
            margin: 0 !important;
            background: transparent;
            border-collapse: collapse !important;
        }


        /* =========================================================
                       COLUMN WIDTHS
                    ========================================================= */

        #goldManagementTable th:nth-child(1),
        #goldManagementTable td:nth-child(1) {
            width: 10% !important;
        }

        #goldManagementTable th:nth-child(2),
        #goldManagementTable td:nth-child(2) {
            width: 22% !important;
        }

        #goldManagementTable th:nth-child(3),
        #goldManagementTable td:nth-child(3) {
            width: 25% !important;
        }

        #goldManagementTable th:nth-child(4),
        #goldManagementTable td:nth-child(4) {
            width: 23% !important;
        }

        #goldManagementTable th:nth-child(5),
        #goldManagementTable td:nth-child(5) {
            width: 20% !important;
        }


        /* =========================================================
                       TABLE HEADER
                    ========================================================= */

        #goldManagementTable thead th {
            background: #252b31 !important;
            color: #f0d37b !important;
            font-size: 15px;
            font-weight: 700;
            padding: 16px 12px !important;
            border-bottom: 1px solid #62583b !important;
            border-top: none !important;
            white-space: nowrap;
            vertical-align: middle;
        }


        /* =========================================================
                       TABLE BODY
                    ========================================================= */

        #goldManagementTable tbody td {
            background: #19212c !important;
            color: #e8eaf0 !important;
            font-size: 15px;
            padding: 16px 12px !important;
            border-bottom: 1px solid #3d4245 !important;
            border-top: none !important;
            vertical-align: middle;
        }


        /* =========================================================
                       HOVER
                    ========================================================= */

        #goldManagementTable tbody tr:hover td {
            background: #202a36 !important;
        }


        /* =========================================================
                       GOLD VALUES
                    ========================================================= */

        #goldManagementTable .gold-value {
            color: #f0d37b !important;
            font-weight: 600;
        }


        /* =========================================================
                       ACTION
                    ========================================================= */

        #goldManagementTable .action-buttons {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            white-space: nowrap;
        }

        #goldManagementTable .action-btn {
            width: 34px;
            height: 34px;
            padding: 0 !important;
            border: none !important;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        #goldManagementTable .action-btn i {
            display: inline-block !important;
            font-size: 16px;
        }


        /* EDIT */

        #goldManagementTable .edit-btn {
            background: #f0cc68 !important;
            color: #19212c !important;
        }


        /* DELETE */

        #goldManagementTable .delete-btn {
            background: #ff7077 !important;
            color: #ffffff !important;
        }


        a {
            text-decoration: none;
        }


        /* =========================================================
                       DATATABLES
                    ========================================================= */

        .dataTables_wrapper .dataTables_info {
            color: #b8bec8 !important;
            font-size: 13px;
            padding-top: 15px;
        }

        .dataTables_wrapper .dataTables_paginate {
            padding-top: 12px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            color: #e8eaf0 !important;
            border: 1px solid transparent !important;
            background: transparent !important;
            border-radius: 6px !important;
            margin-left: 3px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: #252b31 !important;
            border-color: #62583b !important;
            color: #f0d37b !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: #f0cc68 !important;
            border-color: #f0cc68 !important;
            color: #19212c !important;
            font-weight: 600;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
            color: #666d77 !important;
        }


        /* =========================================================
                       MOBILE
                    ========================================================= */

        @media (max-width: 768px) {

            .gold-management-card {
                border-radius: 12px !important;
                padding: 1rem !important;
            }

            #goldManagementTable {
                min-width: 700px !important;
                table-layout: fixed !important;
            }

            #goldManagementTable th:nth-child(1),
            #goldManagementTable td:nth-child(1) {
                width: 70px !important;
                min-width: 70px !important;
            }

            #goldManagementTable th:nth-child(2),
            #goldManagementTable td:nth-child(2) {
                width: 130px !important;
                min-width: 130px !important;
            }

            #goldManagementTable th:nth-child(3),
            #goldManagementTable td:nth-child(3) {
                width: 160px !important;
                min-width: 160px !important;
            }

            #goldManagementTable th:nth-child(4),
            #goldManagementTable td:nth-child(4) {
                width: 140px !important;
                min-width: 140px !important;
            }

            #goldManagementTable th:nth-child(5),
            #goldManagementTable td:nth-child(5) {
                width: 130px !important;
                min-width: 130px !important;
            }

            #goldManagementTable thead th {
                font-size: 13px;
                padding: 13px 10px !important;
            }

            #goldManagementTable tbody td {
                font-size: 13px;
                padding: 13px 10px !important;
            }

            .gold-table-wrapper {
                overflow-x: auto;
            }

            .dataTables_wrapper .dataTables_info {
                font-size: 12px;
            }

        }
    </style>


    <!-- =========================================================
                         PAGE HEADER
                    ========================================================= -->

    <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center mb-3">

        <div class="w-100">

            <h3 class="mb-0">
                Gold Master
            </h3>

        </div>


        <div class="w-100 mt-2 mt-lg-0 text-start text-lg-end">

            <a href="{{ route('add_goldmanagement') }}" id="addPurityBtn" class="btn btn-primary text-white">

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

            </a>

        </div>

    </div>


    <!-- =========================================================
                         MAIN CARD
                    ========================================================= -->

    <div class="card gold-management-card p-4 p-md-5">


        <!-- FILTER -->

        <div
            class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center gap-3 mb-4">


            <!-- PAGE LENGTH -->

            <div>

                <select id="pageLength" class="form-select">

                    <option value="10">
                        10
                    </option>

                    <option value="25">
                        25
                    </option>

                    <option value="50">
                        50
                    </option>

                </select>

            </div>


            <!-- SEARCH -->

            <div>

                <input type="search" id="goldSearch" class="form-control" placeholder="Search">

            </div>

        </div>


        <!-- TABLE -->

        <div class="gold-table-wrapper">

            <table id="goldManagementTable" class="table mb-0" style="width:100%;">

                <thead>

                    <tr>

                        <th>
                            SNO
                        </th>

                        <th>
                            PURITY
                        </th>

                        <th>
                            AMOUNT
                        </th>

                        <th>
                            GRAM
                        </th>

                        <th>
                            ACTION
                        </th>

                    </tr>

                </thead>


                <tbody></tbody>

            </table>

        </div>

    </div>


    <div class="modal fade" id="deletepolicy" 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 Record
                    </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 record?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="button" id="confirmGoldDelete" class="btn btn-danger">
                        Delete
                    </button>
                </div>
            </div>
        </div>
    </div>

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

    <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 () {

            window.goldTable = $('#goldManagementTable').DataTable({

                processing: true,

                serverSide: true,

                ajax: {
                    url: "{{ route('gold_data') }}",

                    dataSrc: function (json) {

                        if (json.hasGoldRecord) {

                            $('#addPurityBtn').hide();

                        } else {

                            $('#addPurityBtn').show();

                        }

                        return json.data;
                    }
                },

                pageLength: 10,

                lengthChange: false,

                searching: true,

                ordering: true,

                info: true,

                autoWidth: false,

                dom: 'rtip',

                columns: [

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

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

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

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

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

                ]

            });


            /* =========================================================
               SEARCH
            ========================================================= */

            $('#goldSearch').on('keyup', function () {

                window.goldTable
                    .search(this.value)
                    .draw();

            });


            /* =========================================================
               PAGE LENGTH
            ========================================================= */

            $('#pageLength').on('change', function () {

                window.goldTable
                    .page
                    .len(parseInt(this.value))
                    .draw();

            });

            let deleteGoldId = null;


            /* =========================================================
               OPEN DELETE MODAL
            ========================================================= */

            $(document).on('click', '.delete-btn', function () {

                deleteGoldId = $(this).data('id');

            });


            /* =========================================================
               CONFIRM DELETE
            ========================================================= */

            $('#confirmGoldDelete').on('click', function () {

                if (!deleteGoldId) {
                    return;
                }

                const button = $(this);

                button.prop('disabled', true);
                button.text('Processing...');

                $.ajax({
                    url: "{{ route('delete_gold') }}",
                    type: "POST",

                    data: {
                        _token: "{{ csrf_token() }}",
                        id: deleteGoldId
                    },

                    success: function (response) {

                        $('#deletepolicy').modal('hide');

                        if (response.success) {

                            window.goldTable.ajax.reload(null, false);

                        }

                    },

                    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 () {

                        button.prop('disabled', false);
                        button.text('Delete');

                        deleteGoldId = null;

                    }

                });

            });

        });

    </script>


@endsection