@extends('Admin.layout')

@section('content')

<style>

    /* =========================================================
       CARD
    ========================================================= */

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


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

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


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

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


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

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

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

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

    #masterManagementTable th:nth-child(4),
    #masterManagementTable td:nth-child(4) {
        width: 25% !important;
        text-align: center !important;
    }


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

    #masterManagementTable 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;
    }


    /* ACTION HEADER */
    #masterManagementTable thead th:last-child {
        text-align: center !important;
    }


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

    #masterManagementTable 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;
    }


    /* ACTION CELL */
    #masterManagementTable tbody td:last-child {
        text-align: center !important;
    }


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

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


    /* =========================================================
       GOLD VALUE
    ========================================================= */

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


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

    #masterManagementTable .action-buttons {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        white-space: nowrap !important;
        width: auto !important;
    }


    #masterManagementTable .action-btn {
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 8px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex-shrink: 0 !important;
        text-decoration: none !important;
    }


    #masterManagementTable .action-btn i {
        display: inline-block !important;
        font-size: 16px !important;
        line-height: 1 !important;
    }


    /* =========================================================
       EDIT
    ========================================================= */

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


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

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


    a {
        text-decoration: none;
    }


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

    #pageLength {
        width: 70px !important;
        min-width: 70px !important;
    }


    /* =========================================================
       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) {

        .master-management-card {
            border-radius: 12px !important;
        }

        #masterManagementTable {
            min-width: 650px !important;
            table-layout: fixed !important;
        }

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

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

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

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

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

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

        #masterManagementTable .action-btn {
            width: 36px !important;
            height: 36px !important;
        }

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

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

        #pageLength {
            width: 65px !important;
            min-width: 65px !important;
        }
    }

</style>


{{-- =========================================================
     PAGE HEADER
========================================================= --}}

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

    <div class="w-100">

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

    </div>


    <div class="d-flex justify-content-end align-items-center gap-2">

        <a href="{{ route('mastermanagement_fields') }}"
           class="btn btn-primary text-white"
           style="width: 130px;">

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

        </a>

    </div>

</div>


{{-- =========================================================
     MAIN CARD
========================================================= --}}

<div class="card master-management-card p-3 p-md-4 p-lg-5">


    {{-- FILTER --}}

    <div class="row g-2 align-items-center mb-4">

        {{-- PAGE LENGTH --}}

        <div class="col-auto">

            <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 class="col-12 col-sm-8 col-md-6 col-lg-4 ms-sm-auto">

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

        </div>

    </div>


    {{-- =====================================================
         TABLE
    ====================================================== --}}

    <div class="master-table-wrapper table-responsive">

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

            <thead>

                <tr>

                    <th>SNO</th>

                    <th>TYPE</th>

                    <th>PER LAKHS</th>
                    <th>Amount</th>

                    <th>ACTION</th>

                </tr>

            </thead>

            <tbody></tbody>

        </table>

    </div>

</div>


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

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

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

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title fw-bold">
                    Delete Master
                </h5>

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

            </div>


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

                <i class="ti ti-trash text-danger"
                   style="font-size: 45px;">
                </i>

                <p class="mt-3 mb-0">
                    Are you sure you want to delete this master?
                </p>

            </div>


            <div class="modal-footer justify-content-center">

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

                    Cancel

                </button>


                <button type="button"
                        class="btn btn-danger"
                        id="confirmDeleteBtn">

                    Delete

                </button>

            </div>

        </div>

    </div>

</div>


{{-- =========================================================
     DATATABLE
========================================================= --}}

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


    var table = $('#masterManagementTable').DataTable({

        dom: 'rtip',

        data: @json($masterManagements),

        columns: [

            {
                data: null,

                render: function (data, type, row, meta) {

                    return meta.row + 1;

                }
            },


            {
                data: 'type',

                render: function (data) {

                    if (data === 'bank') {
                        return 'Bank';
                    }

                    if (data === 'customer') {
                        return 'Customer';
                    }

                    return data;

                }
            },


            {
                data: 'per_lakhs',

                render: function (data) {

                    return `
                        <span class="gold-value">
                            ₹ ${Number(data).toLocaleString('en-IN')}
                        </span>
                    `;

                }
            },

            {
                data: 'amount',

                render: function (data) {

                    return `
                        <span class="gold-value">
                            ₹ ${Number(data).toLocaleString('en-IN')}
                        </span>
                    `;

                }
            },
            {
                data: null,

                render: function (data, type, row) {

                    return `
                        <div class="action-buttons">



                            <button type="button"
                                    class="action-btn delete-btn"
                                    data-id="${row.id}"
                                    title="Delete">

                                <i class="ti ti-trash"></i>

                            </button>

                        </div>
                    `;

                }
            }

        ],


                            // <a href="{{ url('/mastermanagement/edit') }}/${row.id}"
                            //    class="action-btn edit-btn"
                            //    title="Edit">

                            //     <i class="ti ti-edit"></i>

                            // </a>
        columnDefs: [

            {
                orderable: false,
                searchable: false,
                targets: [0, 3]
            }

        ]

    });


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

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

        table.page.len($(this).val()).draw();

    });


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

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

        table.search(this.value).draw();

    });


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

    var deleteId = null;

    var deleteModalElement =
        document.getElementById('deleteMasterModal');

    var deleteModal =
        new bootstrap.Modal(deleteModalElement);


    /* DELETE ICON */

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

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

            deleteModal.show();

        }
    );


    /* CONFIRM DELETE */

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

        if (!deleteId) {
            return;
        }

        var button = $(this);

        button.prop('disabled', true);

        button.text('Deleting...');


        $.ajax({

            url: "{{ route('mastermanagement.delete') }}",

            type: "POST",

            data: {

                _token: "{{ csrf_token() }}",

                id: deleteId

            },


            success: function (response) {

                if (response.success) {

                    deleteModal.hide();

                    location.reload();

                }

            },


            error: function (xhr) {

                console.log(xhr.responseText);

                alert(
                    'Something went wrong. Please try again.'
                );

            },


            complete: function () {

                button.prop('disabled', false);

                button.text('Delete');

                deleteId = null;

            }

        });

    });

});

</script>

@endsection