@extends('layouts.sa.main')

@section('stores', 'active')

@section('main-content')
    <style>
        /* Responsive Button Container */
        @media (max-width: 576px) {
            .btn-container {
                flex-direction: column;
                align-items: flex-start;
            }

            .btn-container button {
                width: 100%;
                margin-bottom: 5px;
                margin-top: 10px;
            }
        }

        /* Header Styling */
        .content-header h1 {
            font-size: 2rem;
            font-weight: 600;
            color: #333;
        }
    </style>

    <div class="content-wrapper mb-3">
        <div class="content-header p-3">
            <div class="container-fluid mt-2">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 mt-2">
                            Store Access 
                            @if($storeDetails)
                                ({{$storeDetails->description}})
                            @endif
                        </h1>
                    </div>
                    <div class="col-sm-6 d-flex justify-content-end align-items-center btn-container">
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                Users
                            </div>
                            <div class="card-body">
                                <input type="text" class="form-control mb-2" id="searchUserRecord"
                                    placeholder="Search Filter">

                                <div class="table-responsive" style="height: 400px; overflow-y: auto;">
                                    <table class="table text-nowrap" id="userDatatable" style="width: 100%">
                                        <thead class="text-sm text-muted" hidden>
                                            <tr>
                                                <th scope="col">Name</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>

                                <button class="btn btn-light border mt-3" id="submitUser">Submit</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                Brands
                            </div>
                            <div class="card-body">
                                <input type="text" class="form-control mb-2" id="searchBrandRecord"
                                    placeholder="Search Filter">

                                <div class="table-responsive" style="height: 400px; overflow-y: auto;">
                                    <table class="table text-nowrap" id="brandDatatable" style="width: 100%">
                                        <thead class="text-sm text-muted" hidden>
                                            <tr>
                                                <th scope="col">Name</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>

                                <button class="btn btn-light border mt-3" id="submitBrand">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        const urlParams = new URLSearchParams(window.location.search);

        let tableUserView, tableBrandView;
        let isFormPrepared = 0;

        const maintenance = {
            init: function() {
                maintenance.getUserData();
                maintenance.getBrandData();
                maintenance.events();
            },
            events: function() {
                $('#searchUserRecord').on('change keyup', function() {
                    let searchValue = $('#searchUserRecord').val();
                    console.log(searchValue);
                    tableUserView.search(searchValue).draw();
                });

                $('#searchBrandRecord').on('change keyup', function() {
                    let searchValue = $('#searchBrandRecord').val();
                    console.log(searchValue);
                    tableBrandView.search(searchValue).draw();
                });

                $("#submitUser").on('click', function() {
                    let selectedUser = $('input[name="userCheckbox"]:checked').map(function() {
                        return $(this).attr('data-id');
                    }).get();

                    let formData = new FormData();
                    formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
                    formData.append('selected_user', selectedUser)

                    maintenance.submitUserData(formData);
                })

                $("#submitBrand").on('click', function() {
                    let selectedBrand = $('input[name="brandCheckbox"]:checked').map(function() {
                        return $(this).attr('data-id');
                    }).get();

                    let formData = new FormData();
                    formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
                    formData.append('selected_brand', selectedBrand)

                    maintenance.submitBrandData(formData);
                })
            },
            getUserData: function(filter = "") {
                if (tableUserView) {
                    tableUserView.destroy();
                }

                tableUserView = $('#userDatatable').DataTable({
                    ajax: `/sa/data/user-access-view/${urlParams.get('store_id')}`,
                    order: [
                        [0, 'asc']
                    ],
                    dom: 't',
                    columns: [{
                            data: null,
                            render: function(data, type, row) {
                                let isChecked = row.is_listed === 1;
                                return `<div class="d-flex flex-column">
                                            <div class="d-flex align-items-center">
                                                <input type="checkbox" name="userCheckbox" class="userCheckbox mr-2" data-id="${row.id}" ${isChecked ? 'checked' : ''}>
                                                <div>${row.fname} ${row.mname} ${row.lname}</div>
                                            </div>
                                            <div class="text-sm text-muted" style="margin-left: 20px">${row.role_desc}</div>
                                        </div>`;
                            },
                        },
                        {
                            data: 'fname',
                            name: 'fname',
                            visible: false,
                        },
                        {
                            data: 'mname',
                            name: 'mname',
                            visible: false,
                        },
                        {
                            data: 'lname',
                            name: 'lname',
                            visible: false,
                        }
                    ],
                    initComplete: function(settings, json) {
                        $(".table").wrap(
                            "<div style='overflow:auto; width:100%;position:relative;'></div>");
                    },
                });
            },
            getBrandData: function(filter = "") {
                if (tableBrandView) {
                    tableBrandView.destroy();
                }

                tableBrandView = $('#brandDatatable').DataTable({
                    ajax: `/sa/data/brand-access-view/${urlParams.get('store_id')}`,
                    order: [
                        [1, 'desc']
                    ],
                    dom: 't',
                    "paging": false,
                    columns: [{
                            data: null,
                            render: function(data, type, row) {
                                let isChecked = row.is_listed === 1;
                                return `<div class="d-flex flex-column">
                                            <div class="d-flex align-items-center">
                                                <input type="checkbox" name="brandCheckbox" class="brandCheckbox mr-2" data-id="${row.brand_id}" ${isChecked ? 'checked' : ''}>
                                                <div>${row.brand} (${row.brand_id})</div>
                                            </div>
                                        </div>`;
                            },
                        },
                        {
                            data: 'is_listed',
                            name: 'is_listed',
                            visible: false,
                        },
                    ],
                    initComplete: function(settings, json) {
                        $(".table").wrap(
                            "<div style='overflow:auto; width:100%;position:relative;'></div>");
                    },
                });
            },
            submitUserData: function(formData) {
                $.ajax({
                        url: `/sa/data/update-user-access/${urlParams.get('store_id')}`,
                        method: 'POST', // Use method instead of type for specifying the HTTP method
                        data: formData,
                        processData: false, // Prevent jQuery from automatically processing the data
                        contentType: false,
                    })
                    .then(function(response) {
                        toastr.success('User list successfully updated for store access.')
                        $("#userDatatable").DataTable().ajax.reload();
                    })
                    .fail(function(xhr, status, error) {
                        let response = JSON.parse(xhr.responseText);
                    });
            },
            submitBrandData: function(formData) {
                $.ajax({
                        url: `/sa/data/update-brand-access/${urlParams.get('store_id')}`,
                        method: 'POST', // Use method instead of type for specifying the HTTP method
                        data: formData,
                        processData: false, // Prevent jQuery from automatically processing the data
                        contentType: false,
                    })
                    .then(function(response) {
                        toastr.success('Brand list successfully updated for store access.')
                        $("#brandDatatable").DataTable().ajax.reload();
                    })
                    .fail(function(xhr, status, error) {
                        let response = JSON.parse(xhr.responseText);
                    });
            }
        }

        maintenance.init();
    </script>
@endsection