@include('division.layout.header')
<style>
    .red_star {
        color: red;
    }

    .status-badge {
        cursor: pointer;
        padding: 10px 15px;
        font-size: 14px;
        border-radius: 8px;
        display: inline-block;
        font-weight: bold;
    }

    .upload_photo p {
        font-size: 12px;
        line-height: 13px;
    }

    .occ_upload .upload_photo {
        max-width: 150px;
        margin: 0 auto;
        border-radius: 50%;
        overflow: hidden;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0 18px;
    }

    .error {
        font-size: 14px !important;
    }

    .upload_photo {
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        background: rgb(7 82 155 / 10%);
        border: 2px dashed #07529B;
        border-radius: 8px;
        padding: 20px 10px;
        position: relative;
    }

    .uploadLogo.active {
        display: none;
    }

    .upload_images.active {
        background-color: #fff;
    }

    .upload_photo input {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        cursor: pointer;
    }

    .occ_upload .upload_photo span.format_view {
        font-size: 8px;
        line-height: 14px;
        text-transform: uppercase;
        color: #000;
        font-weight: 500;
        margin-top: 5px !important;
    }

    .upload_photo span {
        width: 40px;
        height: 40px;
        background: #07529B;
        border: 1px solid #00000000;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 5px;
        padding: 7px;
    }

    .upload_photo span.format_view {
        width: 100%;
        height: auto;
        display: block;
        background: transparent;
        padding: 0;
        font-size: 11px;
        color: #6c6c6c;
        font-weight: 400;
        margin: 0;
    }

    .occ_upload .upload_photo+label.error {
        width: 100%;
        text-align: center;
        display: block;
        padding: 5px 0 0 0;
    }

    .upload_images img {
        width: 100%;
        height: 100%;
    }

    .upload_images {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .upload_photo span.format_view {
        width: 100%;
        height: auto;
        display: block;
        background: transparent;
        padding: 0;
        font-size: 11px;
        color: #6c6c6c;
        font-weight: 400;
        margin: 0;
    }

    .upload_images img {
        width: 100%;
        height: 100%;
    }

    .upload_images {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.css" />

<div class="container-fluid">
    <div class="row g-2">
        <div class="col-auto my-auto">
            <h2 class="main_title">Manage Division</h2>
        </div>
        <div class="col-lg-auto ms-auto">
            <button class="btn btn-primary" id="addDivisionBtn"><i class="fa fa-plus me-2"></i>Add Division
            </button>
        </div>
        <div class="col-lg-auto">
            <a href="{{ route('manageDivisionExport') }}" class="btn btn-success"><i
                    class="fa fa-download me-2"></i>Export </a>
        </div>
    </div>

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

    <div class="row">
        <div class="col-12">
            <table id="manageDivisionDataTable" class="table data-table-dr w-100">
                <thead>
                    <tr>
                        <th>Sr. No.</th>
                        <th>Action</th>
                        <th>Division Name</th>
                        <th>Division Code</th>
                        <th>Division Logo</th>
                        <th>Cluster Name</th>
                        <th>Cost Centre Code</th>
                        <th>Login (Username)</th>
                        {{-- <th>Password</th> --}}
                        <th>Status</th>
                        <th>Date and Time</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

</div>

{{-- Models Start --}}
<div class="modal fade" id="upsertUserDetailsModal" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title fs-5" id="upsertUserDetailsModalLabel">Add Division Details</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="userDetailsForm" name="userDetailsForm" method="post">
                    @csrf
                    <div class="row">
                        <input type="hidden" name="userDetailsUpdateId" id="userDetailsUpdateId">
                        <div class="occ_upload">
                            <div class="upload_photo" id="upload_photo">
                                <span class="uploadLogo">
                                    <img src="{{ asset('assets/admin/images/upload.png') }}" alt="Uploaded Image"
                                        style="max-width: 100%; height: auto;">
                                </span>
                                <div class="upload_images">
                                    <img id="uploaded_image" src="">
                                </div>
                                <input type="hidden" name="upload_logo" id="upload_logo">
                                <p class="m-0">Drop Files Here Or Browse Files</p>
                                <span class="format_view">(Upload image in JPG or PNG only.)</span>
                                <input type="file" id="logo" name="logo" class="border-1" accept="image/*"
                                    tabindex="0">
                            </div>
                            <label id="imageProfile-error" class="error" for="imageProfile"></label>
                            <label id="logo-error" class="error text-center" for="logo"></label>
                        </div>
                        <div class="col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="name" class="form-label">Division Name</label> <span
                                    class="red_star">*</span>
                                <input type="text" class="form-control br_from" id="name" name="name"
                                    autocomplete="off" placeholder="Enter Division Name">
                            </div>
                        </div>
                        <div class="col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="user_name" class="form-label">Username</label> <span
                                    class="red_star">*</span>
                                <input type="text" class="form-control br_from" id="user_name" autocomplete="off"
                                    name="user_name" placeholder="Enter Username">
                            </div>
                        </div>
                        <div class="col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="division_code" class="form-label">Division Code</label>
                                <span class="red_star">*</span>
                                <input type="text" class="form-control br_from" id="division_code"
                                    name="division_code" placeholder="Enter Division Code">
                            </div>
                        </div>
                        <div class="col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="cluster_name" class="form-label">Cluster Name</label> <span
                                    class="red_star">*</span>
                                <input type="text" class="form-control br_from" id="cluster_name"
                                    name="cluster_name" placeholder="Enter Cluster Name">
                            </div>
                        </div>
                        <div class="col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="cost_centre_code" class="form-label">Cost Centre Code</label>
                                <span class="red_star">*</span>
                                <input type="text" class="form-control br_from" id="cost_centre_code"
                                    name="cost_centre_code" placeholder="Enter Cost Centre Code">
                            </div>
                        </div>
                        <div class="col-sm-12 col-12">
                            <div class="mb-3">
                                {{-- For Edit required star need to remove  --}}
                                <label for="password" class="form-label">Password</label> <span class="red_star"
                                    id="isPasswordRequired">*</span>
                                <input type="password" class="form-control br_from" autocomplete="off"
                                    id="password" name="password" placeholder="Enter Password">
                            </div>
                        </div>
                        <div class="col-lg-12 text-center">
                            <div class="mb-3">
                                <button type="submit" id="userDetailsFormSubmit"
                                    class="btn btn-primary mt-4">Submit</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="view_logo" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Division Logo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="sign_img_show">
                    <img src="" id="buSignatureImg" alt="Division Logo" />
                </div>
            </div>
        </div>
    </div>
</div>

<div id="uploadImageModal" class="modal" role="dialog" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-md">
        <div class="modal-content">
            <div class="d-flex justify-content-end border-bottom-0 py-3 px-3">
                <button class="btn-close z-index-1" type="button" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <div id="image_demo" class="responsive"></div>
            </div>
            <div class="modal-footer justify-content-center">
                <button class="btn btn-primary imgRotate me-3 mt-3 p-3" data-rotate="-90" type="button">
                    <i class="fas fa-undo" aria-hidden="true"></i>
                </button>
                <button class="btn btn-primary imgRotate me-3 mt-3 p-3" data-rotate="90" type="button">
                    <i class="fas fa-redo" aria-hidden="true"></i>
                </button>
                <button class="btn btn-primary mt-3 crop_image p-3">Save</button>
            </div>
        </div>
    </div>
</div>
{{-- Models End --}}

@include('division.layout.footer')

<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>

<script>
    var $image_crop = $('#image_demo').croppie({
        viewport: {
            width: 300, // Rectangular viewport (2:1 ratio)
            height: 150
        },
        boundary: {
            width: 400,
            height: 250
        },
        showZoomer: true,
        enableExif: true,
        enableOrientation: true
    });

    $('#logo').on('change', function() {
        let file = this.files[0];
        let ext = file.name.split('.').pop().toLowerCase();
        let maxSize = 10 * 1024 * 1024; // 10MB

        if (['png', 'jpg', 'jpeg'].indexOf(ext) === -1) {
            $.notify('Invalid file type. Please upload an image in JPG or PNG format.', "warn");
            return;
        }
        if (file.size > maxSize) {
            $.notify('File size exceeds 10MB. Please upload a smaller file.', "warn");
            return;
        }

        let reader = new FileReader();
        reader.onload = function(event) {
            $image_crop.croppie('bind', {
                url: event.target.result
            }).then(function() {
                console.log('Croppie bind complete');
            });
        };
        reader.readAsDataURL(file);
        $('#uploadImageModal').modal('show');
    });

    $('.imgRotate').on('click', function() {
        let rotate = parseInt($(this).data('rotate'), 10);
        $image_crop.croppie('rotate', rotate);
    });

    $('.crop_image').on('click', function() {
        $(this).html('Uploading...').attr('disabled', true);

        $image_crop.croppie('result', {
            type: 'canvas',
            size: {
                width: 300, // Rectangular output (2:1 ratio)
                height: 100
            }
        }).then(function(response) {
            $.ajax({
                url: "{{ route('admin.uploadCroppedLogo') }}",
                type: "POST",
                data: {
                    image: response,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.status === 1) {
                        $('#uploaded_image').attr('src', response.url);
                        $('#upload_logo').val(response.image);
                        $('#uploadImageModal').modal('hide');
                    } else {
                        $.notify(response.message, "error");
                    }
                    $('.crop_image').html('Save').attr('disabled', false);
                },
                error: function() {
                    $('.crop_image').html('Save').attr('disabled', false);
                }
            });
        });
    });
</script>

<script>
    let manageDivisionDataTable;

    $(document).on("click", ".small_view", function() {
        let fileUrl = $(this).data("file");
        let header = $(this).data("header");
        $("#pdfViewer").attr("src", fileUrl);
        $("#viewDocumentsHeader").text(header);
    });

    $(document).on("click", ".view_sign", function() {
        let fileUrl = $(this).data("image");
        $("#buSignatureImg").attr("src", fileUrl);
    });

    const swalWithBootstrapButtons = Swal.mixin({
        customClass: {
            confirmButton: "btn btn-success me-2",
            denyButton: "btn btn-danger"
        },
        buttonsStyling: false
    });

    function userStatusChange(id, status) {
        swalWithBootstrapButtons.fire({
            title: 'Are you sure?',
            text: "You want to change division status?",
            icon: 'warning',
            showDenyButton: true,
            denyButtonText: 'No',
            confirmButtonText: 'Yes'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ route('admin.updateUserStatus') }}",
                    type: 'POST',
                    data: {
                        'update_id': id,
                        'status': status,
                        '_token': "{{ csrf_token() }}"
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.status == 1) {
                            $.notify(response.message, "success");
                            manageDivisionDataTable.draw();
                        } else {
                            $.notify(response.message, "error");
                        }
                    },
                    error: function(jqXHR) {
                        $.notify(jqXHR.responseJSON.message, "error");
                        manageDivisionDataTable.draw();
                    }
                });
            } else {
                $.notify("The status remains unchanged.", "info");
                manageDivisionDataTable.draw();
            }
        });
    }

    function userDetailsFormSet(userDetailsUpdateId, name, user_name, division_code, cluster_name, cost_centre_code,
        logoUrl) {
        $("#upsertUserDetailsModalLabel").text("Edit Division Details");

        $("#userDetailsUpdateId").val(userDetailsUpdateId);
        $("#name").val(name);
        $("#user_name").val(user_name);
        $("#division_code").val(division_code);
        $("#cluster_name").val(cluster_name);
        $("#cost_centre_code").val(cost_centre_code);

        $('#isPasswordRequired').addClass('d-none'); // Hide span
        $('.upload_images').addClass('active');
        $('.uploadLogo').addClass('active');

        if (logoUrl != '-') {
            // console.log(logoUrl);
            let imageElement = $('#uploaded_image'); // jQuery way to select the element

            // Set the src attribute and show the image
            imageElement.attr('src', logoUrl).removeClass(
            'd-none'); // This will set the source and show the image if it was hidden
        }
    }

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

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

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

            // Reset other elements if needed
            $("#upsertUserDetailsModalLabel").text("Add Division Details"); // Reset the modal title

            $('#isPasswordRequired').removeClass('d-none'); // Show span
            $('.uploadLogo').removeClass('active');
            $('.upload_images').removeClass('active');

            // Hide the image Tag
            $('#uploaded_image').attr('src', '').addClass('d-none');

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

        $('#addDivisionBtn').on('click', function() {
            $('#upsertUserDetailsModal').modal('show');
        });

        $("#applyButton").click(function() {
            manageDivisionDataTable.draw();
        });

        $("#clearButton").click(function() {
            $("#custom_study_filter").val('').change();
            // $("#activity_type_id").val('').change();
            $("#custom_division_filter").val('').change();
            manageDivisionDataTable.draw();
        });

        $.validator.addMethod("notOnlySpaces", function(value, element) {
            return $.trim(value).length > 0;
        }, "This field cannot contain only spaces.");

        $('#userDetailsForm').validate({
            ignore: ".ignore",
            rules: {
                name: {
                    required: true,
                    minlength: 1,
                    maxlength: 255,
                    notOnlySpaces: true
                },
                user_name: {
                    required: true,
                    minlength: 1,
                    maxlength: 255,
                    notOnlySpaces: true
                },
                division_code: {
                    required: true,
                    minlength: 1,
                    maxlength: 255,
                    notOnlySpaces: true
                },
                cluster_name: {
                    required: true,
                    minlength: 1,
                    maxlength: 255,
                    notOnlySpaces: true
                },
                cost_centre_code: {
                    required: true,
                    number: true,
                    minlength: 1,
                    maxlength: 255,
                    notOnlySpaces: true
                },
                password: {
                    required: function() {
                        return $('#userDetailsUpdateId').val() === "";
                    },
                    minlength: 8,
                    maxlength: 100
                },
                logo: {
                    required: function() {
                        // Check if userDetailsUpdateId is empty (for add mode) or filled (for edit mode)
                        return $('#userDetailsUpdateId').val() ===
                        ""; // logo image required only if userDetailsUpdateId is empty (add mode)
                    },
                }
            },
            messages: {
                name: {
                    required: "Division Name is required.",
                    notOnlySpaces: "Division Name cannot contain only spaces.",
                    minlength: "Division Name must be at least 1 character long.",
                    maxlength: "Division Name must not exceed 255 characters.",
                },
                user_name: {
                    required: "Username is required.",
                    notOnlySpaces: "Username cannot contain only spaces.",
                    minlength: "Username must be at least 1 character long.",
                    maxlength: "Username must not exceed 255 characters.",
                },
                division_code: {
                    required: "Division Code is required.",
                    notOnlySpaces: "Division Code cannot contain only spaces.",
                    minlength: "Division Code must be at least 1 character long.",
                    maxlength: "Division Code must not exceed 255 characters.",
                },
                cluster_name: {
                    required: "Cluster Name is required.",
                    notOnlySpaces: "Cluster Name cannot contain only spaces.",
                    minlength: "Cluster Name must be at least 1 character long.",
                    maxlength: "Cluster Name must not exceed 65535 characters.",
                },
                cost_centre_code: {
                    required: "Cost Centre Code is required.",
                    number: "Cost Centre Code can only contain number.",
                    minlength: "Cost Centre Code must be at least 1 character long.",
                    maxlength: "Cost Centre Code must not exceed 255 characters.",
                },
                password: {
                    required: "Please enter a password to proceed.",
                    minlength: "Password must be at least 8 character long.",
                    maxlength: "Password must not exceed 100 characters.",
                },
                logo: {
                    required: "Division logo image is required."
                }
            },
            errorPlacement: function(error, element) {
                let placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                $("#userDetailsFormSubmit").attr('disabled', true);
                let formData = new FormData($("#userDetailsForm")[0]);

                $.ajax({
                    url: '{{ route('admin.upsertDivisionDetails') }}',
                    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) {
                            $('#upsertUserDetailsModal').modal('hide');
                            $.notify(response.message, "success");

                            manageDivisionDataTable.draw();
                        } else if (response.status == 0) {
                            $.notify(response.message, "warn");
                        }
                        $("#userDetailsFormSubmit").attr('disabled', false);
                    },
                    error: function(xhr, status, error) {
                        if (jqXHR.status == 419) {
                            $.notify("Please refresh the Page", "error");
                        } else if (jqXHR.status == 500) {
                            $.notify("Please try after a few minutes", "error");
                        } else {
                            $.notify(jqXHR.responseJSON.message, "error");
                        }
                        console.error('An error occurred:', error);
                        $("#userDetailsFormSubmit").attr('disabled', false);
                    }
                });
            }
        });

        manageDivisionDataTable = $('#manageDivisionDataTable').DataTable({
            scrollX: true,
            destroy: true,
            processing: true,
            serverSide: true,
            responsive: false,
            autoWidth: false,
            ajax: {
                method: 'post',
                url: "{{ route('manageDivisionPaginate') }}",
                data: function(d) {
                    // d.division_id = $('#custom_division_filter option:selected').val(),
                    d._token = "{{ csrf_token() }}"
                }
            },
            "drawCallback": function(settings) {},
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    searchable: false,
                    orderable: false
                },
                {
                    data: 'action',
                    name: 'action',
                    searchable: false,
                    orderable: false
                },
                {
                    data: 'name',
                    name: 'name',
                    searchable: true,
                },
                {
                    data: 'division_code',
                    name: 'division_code',
                    searchable: true,
                },
                {
                    data: 'logo',
                    name: 'logo',
                    searchable: true,
                    orderable: false
                },
                {
                    data: 'cluster_name',
                    name: 'cluster_name',
                    searchable: true
                },
                {
                    data: 'cost_centre_code',
                    name: 'cost_centre_code',
                    searchable: true,
                    orderable: false
                },
                {
                    data: 'user_name',
                    name: 'user_name',
                    searchable: true
                },
                // {
                //     data: 'password',
                //     name: 'password',
                //     searchable: false,
                //     orderable: false
                // },
                {
                    data: 'status',
                    name: 'status',
                    searchable: false,
                    orderable: false
                },
                {
                    data: 'created_at',
                    name: 'created_at',
                    searchable: false,
                    orderable: false
                }
            ],
            columnDefs: [{
                "aTargets": [1, 2, 3, 4, 5, 6, 7, 8, 9],
                "mRender": function(data, type, full) {
                    if (data != null) {
                        return data;
                    } else {
                        return '-';
                    }
                }
            }, ],
        });
    });
</script>