@include('admin.layout.header')

<div class="container-fluid">
    <!--  Row 1 -->
    <div class="row g-2">

        <div class="col-auto col-lg-auto col-md-auto col-sm-auto my-auto">
            <h2 class="main_title">Manage Brand</h2>
        </div>
        <div class="col-auto col-lg-auto col-md-auto col-sm-auto ms-auto ms-auto">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#brandModal">
                <i class="fa-solid fa-plus me-2"></i> Add Brand
            </button>
        </div>
    </div>

    <div class="row mb-3">
    </div>

    <div class="row">
        <div class="col-12">
            <div class="white_shadow_rs">
                <table id="datatable" name="datatable" class="table table-striped data-table-dr" style="width:100%">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>Group Name</th>
                            <th>Brand Name</th>
                            <th>Brand Point</th>
                            <th>Status</th>
                            <th>Edit</th>
                            <th>Date And Time</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tbody>
                </table>
            </div>
        </div>
    </div>
</div>

</div>

{{-- Brand Modal --}}
<div class="modal fade" id="brandModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="brandOperationStatus">Add Brand</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            {!! Form::open([
                'url' => '#',
                'name' => 'brandForm',
                'id' => 'brandForm',
                'enctype' => 'multipart/form-data',
            ]) !!}
            <div class="modal-body">
                <input type="hidden" name="brand_id" id="brand_id">
                <div class="mb-3">
                    <label for="brand_name" class="form-label">Brand Name</label>
                    <input type="text" class="form-control" id="brand_name" name="brand_name"
                        placeholder="Enter Brand Name">
                </div>
                <div class="mb-3">
                    <label for="point" class="form-label">Brand Point</label>
                    <input type="text" class="form-control" id="point" name="point"
                        placeholder="Enter Brand Point">
                </div>
                <div class="mb-3">
                    <label for="position_code" class="form-label">Group</label>
                    <select class="select2 js-example-basic-single select-label form-control w-100" name="group_id"
                        id="group_id">
                        <option value="" selected>Select Group</option>
                        @foreach ($groups as $group)
                            <option value="{{ $group->id }}">{{ $group->group_name }}</option>
                        @endforeach
                    </select>
                    <label id="group_id-error" class="error" for="group_id" style="display: none;"></label>
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="submit" class="btn btn-primary" id="brandFormSubmit">Submit</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

@include('admin.layout.footer')
<script src="{{ asset('admin/assets/js/jquery.validate.min.js') }}"></script>
<script src="{{ asset('admin/assets/js/additional-methods.min.js') }}"></script>
<script src="{{ asset('notify.js') }}"></script>

<script>
    function editbrandSet(brand_id, brand_name, point, group_id) {
        $("#brandOperationStatus").text("Edit Brand");
        $("#brand_id").val(brand_id);
        $("#brand_name").val(brand_name);
        $("#point").val(point);
        $("#group_id").val(group_id).trigger('change');
    }

    function brandStatusChange(brandId, status) {
        $.ajax({
            url: "{{ route('updateBrandStatus') }}",
            type: 'POST',
            data: {
                'brand_id': brandId,
                'status': status,
                '_token': "{{ csrf_token() }}"
            },
            dataType: "json",
            success: function(response) {
                if (response.status == 1) {
                    $.notify(response.msg, "success");
                    $('#datatable').DataTable().ajax.reload();
                } else {
                    $.notify(response.msg, "error");
                }
            },
            error: function(jqXHR) {
                $.notify(jqXHR.responseJSON.msg, "error");
            }
        });
    }

    $(document).ready(function() {
        $('#brandModal').on('hidden.bs.modal', function() {
            // Reset form fields
            $(this).find('form')[0].reset();

            // Reset select boxes to their default value (usually the first option)
            $(this).find('select').val('').trigger('change');

            // Reset other elements if needed
            $("#doctorOperationStatus").text("Add Doctor"); // Reset the modal title
            $("#position_code").prop('disabled', false);

            // Reset hidden input specifically
            $('#brand_id').val('');

            // Clear validation error messages and reset the form's validation state
            var form = $(this).find('form');
            form.validate().resetForm(); // Clears error messages
            form.find('.is-invalid').removeClass('is-invalid'); // Remove error class from input fields
        });

        // When the position_code select is changed
        $('#position_code').on('change', function() {
            // Get the selected option
            var selectedOption = $(this).find('option:selected');
            // Get the corresponding emp_name from the data attribute
            var empName = selectedOption.data('emp-name');

            // Update the emp_name input field
            $('#emp_name').val(empName || '');
        });

        $('#brandForm').validate({
            ignore: ".ignore",
            rules: {
                brand_name: {
                    required: true,
                },
                point: {
                    required: true,
                },
                group_id: {
                    required: false,
                },
            },
            messages: {},
            errorPlacement: function(error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error);
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                $("#brandFormSubmit").attr('disabled', true);
                var formData = new FormData($("#brandForm")[0]);

                $.ajax({
                    url: '{{ route('upsertBrand') }}',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.status == 1) {
                            $('#brandModal').modal('hide');
                            $.notify(response.msg, "success");
                            $('#datatable').DataTable().ajax.reload();
                        } else if (response.status == 0) {
                            $.notify(response.error, "error");
                        }
                        $("#brandFormSubmit").attr('disabled', false);
                    },
                    error: function(xhr, status, error) {
                        console.error('An error occurred:', error);
                        $("#brandFormSubmit").attr('disabled', false);
                    }
                });
            }
        });


        $(function() {
            var columns = [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'group_name',
                    name: 'group_name'
                },
                {
                    data: 'brand_name',
                    name: 'brand_name'
                },
                {
                    data: 'point',
                    name: 'point'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'edit',
                    name: 'edit'
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                }
            ];
            var columnDefs = [{
                "width": "150",
                "targets": [5]
            }];
            getdatatable("{{ route('manageBrandPaginate') }}", columns, columnDefs);
        });

        function getdatatable(url, columns, columnDefs) {
            if ($.fn.DataTable.isDataTable('#datatable')) {
                $('#datatable').DataTable().destroy();
            }
            $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 25,
                "bDestroy": true,
                order: [],
                "scrollX": true,
                columns: columns,
                columnDefs: columnDefs,
                ajax: {
                    method: 'post',
                    url: url,
                    data: function(d) {
                        d._token = "{{ csrf_token() }}";
                    }
                },
                drawCallback: function(settings) {
                    // Reinitialize Venobox
                    // new VenoBox({
                    //     selector: '.my-video-links',
                    // });
                }
            });
        }
    });
</script>