@extends('layouts.user.main')
@section('content')

    
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Post-->
        <div class="post d-flex flex-column-fluid" id="kt_post">
            <!--begin::Container-->
            <div id="kt_content_container" class="container-xxl">
                <!--begin::Card-->
                <div class="card card-flush">
                    <!--begin::Card body-->
                    <div class="card-body py-4">
                        <!--begin::Table-->
                        <div class="table-responsive">
                            <table class="table align-middle table-row-dashed fs-6 gy-5 table-hover table-striped" id="kt_table_custom_contract_size">
                                <!--begin::Table head-->
                                <thead>
                                    <!--begin::Table row-->
                                    <tr class="text-center fw-bolder fs-7 text-uppercase gs-0">
                                        <th class="min-w-100px">Symbol</th>
                                        <th class="min-w-100px">Current Contract Size</th>
                                        <th class="min-w-100px">Modified Contract Size</th>
                                        <th class="min-w-100px">Status</th>
                                        <th class="min-w-100px">Action</th>
                                    </tr>
                                    <!--end::Table row-->
                                </thead>
                                <!--end::Table head-->
                                <!--begin::Table body-->
                                <tbody class="fw-bold">
                                </tbody>
                                <!--end::Table body-->
                            </table>
                        </div>
                        <!--end::Table-->
                    </div>
                </div>
                <!--end::Card-->
            </div>
            <!--end::Container-->
        </div>
        <!--end::Post-->
    </div>
    <script type="text/javascript">
        const token   = "{{ csrf_token() }}";
        const table   = $('#kt_table_custom_contract_size');

        var dataColumns = [
            {
                data: 'symbol',
                name: 'symbol'
            },
            {
                data: 'currentContractSize',
                name: 'currentContractSize'
            },
            {
                data: 'modifiedContractSize',
                name: 'modifiedContractSize'
            },
            {
                data: 'status',
                name: 'status',
                render: function(data, type, full, meta) {
                    var disableButton = '';
                    @if (!auth()->user()->can('Custom Contract Size###Write'))    
                    {
                        disableButton = 'disabled';
                    }
                    @endif

                    const ajaxUrl = @json(route('updatCustomContractSizeStatus', [':id']));

                    return `
                        <form action="${ajaxUrl.replace(':id', full.id)}" method="POST" id="statusForm_${full.id}" class="text-center">
                            <div class="form-check form-switch form-check-custom form-check-solid d-flex justify-content-center align-items-center">
                                <input class="form-check-input" type="checkbox" value="${full.status}" id="status_${full.id}" name="status" ${full.status === "1" ? 'checked="checked"' : ''} onchange="changeContractSizeStatus('${full.id}')" ${disableButton}>
                                <input type="hidden" name="status" value="${full.status}">
                                <label class="form-check-label fw-bold text-gray-400 ms-3" for="status_${full.id}" id="status_label_${full.id}"></label>
                            </div>
                        </form>
                    `;
                },
                orderable: false,
                searchable: false
            },
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            }
        ];

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        function makeDataTable(table, dataColumns) {

            var reloadAjex = $(table).dataTable({
                // export buttons
                dom: "<'card-header align-items-center py-5 gap-2 gap-md-5'<'card-title'<'d-flex position-relative my-1'f>><'card-toolbar flex-row-fluid justify-content-end gap-6'<'custom-button-container'>B>>" +
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-12 col-md-5 gap-2 d-flex align-items-center justify-content-center justify-content-md-start'l<i>><'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>>",
                processing: true,
                stateSave: true,
                "stateSaveParams": function (settings, data) {
                    data.search.search = '';
                },
                pageLength: 10,
                "lengthMenu": {!! json_encode(CommonConstants::DEFAULT_PAGE_PER_DATA) !!},
                language: {
                    searchPlaceholder: "Search Custom Contract Size",
                    search: ""
                },
                buttons: [
                    @if (auth()->user()->can('Custom Contract Size###Write'))    
                    {
                        text: 'Add Contract Size',
                        action: function (e, dt, node, config) {
                            window.location.href = "{{ route('customContractSizeCreate') }}";
                        }
                    }
                    @endif
                ],
                ajax: {
                    url: "{{ route('customContractSize') }}",
                    method: "GET",
                    data: {}
                },
                columns: dataColumns,
                rowCallback: function(row, data) {
                    $(row).addClass('text-center');
                },
                "stateLoadParams": function (settings, data) {
                    if (data.select) {
                        data.select.rows = [];
                    }
                },
                order: [
                    [0, "desc"]
                ],
            });

        }

        function changeContractSizeStatus(id) {
            const statusCheckbox    = $(`#status_${id}`);
            const csrfToken         = "{{ csrf_token() }}";
            const status            = statusCheckbox.prop('checked') ? 1 : 0;
            const message           = `Are you sure you want to ${status == 1 ? 'activate' : 'deactivate'} this Contract Size?`;
            
            Swal.fire({
                title: message,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, change it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('updatCustomContractSizeStatus', ['id' => ':id']) }}".replace(':id', id),
                        method: 'POST',
                        data: {
                            status: status,
                            _token: csrfToken
                        },
                        success: function (response) {
                            console.log(response);
                        },
                        error: function (error) {
                            console.error(error);
                        }
                    });
                } else {
                    statusCheckbox.prop('checked', !statusCheckbox.prop('checked'));
                }
            });
        }

        $(document).ready(function() {
            makeDataTable(table, dataColumns);

            @if (auth()->user()->can('Custom Contract Size###Write'))    
            {
                $('.card-toolbar').prepend(`<button class="btn btn-secondary" id="updateContractSize">
                            <span class="fas fa-sync-alt me-2" id="updateContractSizeLoader"></span><span>Update Contract Size</span>
                        </button>`);
            }
            @endif
            

            $("#updateContractSize").click(function(){
                var updateButton = $(this);

                $('#updateContractSizeLoader').addClass('loader');
                updateButton.prop('disabled', true);

                $.ajax({
                    url: "{{ route('updateCurrentContractSize') }}",
                    method: "POST",
                    data: {
                        _token: '{{csrf_token()}}'
                    },
                    success: function(response){
                        updateButton.prop('disabled', false);
                        $('#updateContractSizeLoader').removeClass('loader');
                        location.reload();
                    },
                    error: function(xhr, status, error) {
                        updateButton.prop('disabled', false);
                        $('#updateContractSizeLoader').removeClass('loader');
                        console.error(xhr.responseText);
                    }
                });
            });
        });
    </script>
@endsection