{{-- Style --}}
<style>
    label{
        background: #fff;
        border: 1px solid rgb(232, 232, 232);
        font-weight: 500 !important
    }
    label.switch_label{
        background: none;
        border: 0px solid #ffffff05;
    }

    p.text-report-form{
        color: black !important;
    }
</style>

{{-- Form Modal --}}
<div id="formModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="p-4 modal-body special-modal-body">

                {{-- Title --}}
                <div class="row justify-content-center align-items-baseline">
                    <div class="pt-1 pl-2 text-start col-11">
                        <h1 class="pl-4 modal_title" style="font-weight: 800; color: #0d6889"></h1>
                    </div>
                    <div class="text-center col-1">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float: none; font-size: 3.5rem; color: #FF5050">
                            <span aria-hidden="true">
                                <img src="{{ asset('icons/close_modal.svg') }}" alt=""  style="margin-top: -1rem; width: 2.3rem;">
                            </span>
                    </button>
                    </div>
                </div>

                {{-- Form --}}
                <form method="post" id="sample_form" enctype="multipart/form-data"
                    class="form-horizontal" autocomplete="off"
                >@csrf
                    <div class="p-3 row justify-content-center align-items-baseline border-bottom">

                        {{-- Basic Data --}}
                        <div class="pr-3 col-6">

                            {{-- Title --}}
                            <h4 class="mt-1 mb-3" style="color: #0d6889; font-weight: 700">
                                {{ __('entity_forms')['user']['section_1'] }}
                            </h4>

                            {{-- Nombre --}}
                            <div class="form-group row">
                                <label class="text-center control-label col-md-3">
                                    {{ __('entity_fields')['common']['name'] }} <span style="color: #dc3742af;">*</span>
                                </label>
                                <div class="pl-1 col-md-9">
                                    <input type="text" name="name" id="name" class="form-control" required placeholder="{{ __('entity_forms')['user']['name'] }}"/>
                                </div>
                            </div>

                            {{-- Apellido --}}
                            <div class="form-group row">
                                <label class="text-center control-label col-md-3">
                                    {{ __('entity_fields')['user']['last_name'] }}
                                </label>
                                <div class="pl-1 col-md-9">
                                    <input type="text" name="apellidos" id="apellidos" class="form-control" placeholder="{{ __('entity_forms')['user']['last_name'] }}"/>
                                </div>
                            </div>

                            {{-- Correo --}}
                            <div class="form-group row">
                                <label class="text-center control-label col-md-3">
                                    {{ __('entity_fields')['common']['email'] }} <span style="color: #dc3742af;">*</span>
                                </label>
                                <div class="pl-1 col-md-9">
                                    <input type="text" name="email" id="email" class="form-control" required placeholder="ejemplo@gmail.com"/>
                                </div>
                            </div>

                            {{-- Teléfono --}}
                            <div class="form-group row">
                                <label class="text-center control-label col-md-3">
                                    {{ __('entity_fields')['common']['phone'] }} <span style="color: #dc3742af;">*</span>
                                </label>
                                <div class="pl-1 col-md-9">
                                    <input type="text" name="phone" id="phone" class="form-control" required
                                    placeholder="+() 000-000-0000"/>
                                </div>
                            </div>

                            {{-- Turno --}}
                            @if ($has_shifts)
                                <div class="form-group row">
                                    <label class="text-center control-label col-md-3">
                                        {{ __('entity_forms')['user']['shift'] }} <span style="color: #dc3742af;">*</span>
                                    </label>
                                    <div class="pl-1 col-md-9">
                                        <select id="shift_id" name="shift_id" class="form-control" required>
                                            <option value="" disabled selected>-- {{ __('common_actions')['select'] }} --</option>
                                            @foreach ($shifts as $shift)
                                                <option value="{{ $shift->id }}">{{ $shift->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            @endif

                            {{-- Rol --}}
                            <div class="form-group row">
                                <label class="text-center control-label col-md-2">
                                    {{ __('entity_fields')['user']['role'] }} <span style="color: #dc3742af;">*</span>
                                </label>
                                <div class="pl-1 col-md-10">
                                    <select id="role" type="text" class="form-control" name="role" required
                                        onchange="updateRolePermissions();"
                                    >
                                        @if (Auth::user()->role === 'administrador')
                                            <option value="" disabled selected>-- {{ __('common_actions')['select'] }} --</option>
                                            <option value="administrador">{{ __('entity_fields')['user']['role_types']['admin'] }}</option>
                                            <option value="gerente">{{ __('entity_fields')['user']['role_types']['manager'] }}</option>
                                        @endif
                                        <option value="recepcionista">{{ __('entity_fields')['user']['role_types']['receptionist'] }}</option>
                                    </select>
                                </div>
                            </div>

                            {{-- Password --}}
                            <div class="form-group row">
                                <label class="text-center control-label col-md-4">
                                    {{ __('entity_fields')['common']['password'] }}
                                </label>
                                <div class="pl-1 col-md-8">
                                    <input type="password" name="password" id="password" class="form-control" autocomplete="off" required placeholder="{{ __('entity_forms')['user']['password'] }}"/>
                                </div>
                                <small id="password_message" class="pt-2 pl-4 text-center" style="color:#0d6889; font-weight: 500">
                                    <i class="fas fa-info-circle"></i>
                                    &nbsp;&nbsp;{{ __('entity_forms')['user']['password_indications'] }}
                                </small>
                            </div><br>

                            {{-- Button --}}
                            <div class="mt-2 form-group" align="center">
                                <input type="hidden" name="action" id="action" />
                                <input type="hidden" name="hidden_id" id="hidden_id" />
                                <input type="submit" name="action_button" id="action_button" class="py-2 boton btn"
                                    value="{{ __('common_actions')['add'] }}" />
                            </div>
                        </div>

                        {{-- Permissions --}}
                        <div class="pl-3 col-6">

                            {{-- Title --}}
                            <h4 class="mt-1 mb-3" style="color: #0d6889; font-weight: 700">
                                {{ __('entity_forms')['user']['section_2'] }}
                            </h4>

                            {{-- Switch Block --}}
                            <div class="pl-2">

                                {{-- General Control --}}
                                <table class="table pl-2 mb-1 table-responsive">
                                    <thead>
                                        <tr>
                                            <td>
                                                <label class="switch switch_label">
                                                    <input type="checkbox"
                                                        onchange="updateUserPermissions('has_permission', event)"
                                                        id="has_permission" name="has_permission">
                                                    <span class="slider main_slider round"></span>
                                                </label>
                                            </td>
                                            <td style="font-weight: 700;">
                                                {{ __('entity_forms')['user']['reports'] }} <span id="has_permission_status">{{ __('entity_forms')['user']['disabled'] }}</span>
                                            </td>
                                        </tr>
                                    </thead>
                                </table>

                                {{-- Secondary Sections --}}
                                <div class="px-4">
                                    @foreach ($report_types as $type)
                                        <div class="mb-3 switch_card" style="width: 85% !important">
                                            <div class="px-3 py-1 row align-items-center">

                                                <div class="col-6 " style="font-weight: 500;  color:#0d6889">
                                                    {{ $type['title'] }}
                                                </div>
                                                <div class="pl-4 col-4 offset-1">
                                                    <label class="switch switch_label">
                                                        <input type="checkbox" disabled
                                                            id="{{ $type['id'] }}" name="{{ $type['id'] }}">
                                                        <span class="specific_slider slider round"></span>
                                                    </label>
                                                </div>

                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                        </div>


                    </div>
                </form>

            </div>
        </div>
    </div>
</div>

{{-- CRUD Interactions --}}
<script>
    $(document).ready(function(){

        // On close CRUD form
        $('#formModal').on('hide.bs.modal', function () {
            document.activeElement.blur();
        });

        // Open For Create
        $('#create_record').click(function(){
            $('.modal_title').text("{{ __('entities')['settings']['user'] }}".toUpperCase());
            // $('.modal_subtitle').text("- Nuevo Usuario -");
            $('#action_button').val("{{ __('common_actions')['register'] }}");
            $('#action').val("Add");
            $('#formModal').modal('show');
            $('#sample_form')[0].reset();

            $(`#password`).prop('required', true);
            $(`#password_message`).hide();
            $('.specific_slider').css('cursor', 'not-allowed');
            reports.forEach(e => {
                $(`#${e.id}`).prop('disabled', true);
            });
        });

        // Open For Edit
        $(document).on('click', '.edit', function(){
            var id = $(this).attr('id');
            $.ajax({
                url:`/users/${id}/edit`,
                dataType:"json",
                success:function(html){

                    // Extract Data
                    data = html.data;
                    report_permissions = data.report_permissions;

                    // Seed Form
                    $('#sample_form')[0].reset();
                    $('#name').val(data.name);
                    $('#apellidos').val(data.last_name);
                    $('#email').val(data.email);
                    $('#phone').val(data.phone);
                    $('#shift_id').val(data.shift_id);
                    $('#role').val(data.role);
                    $('#hidden_id').val(data.id);

                    // Custom Modal
                    $('.modal_title').text("{{ __('entities')['settings']['user'] }}".toUpperCase());
                    // $('.modal_subtitle').text(`- Usuario #${data.id} -`);
                    $('#action_button').val("{{ __('common_actions')['update'] }}");
                    $(`#password`).prop('required', false);
                    $(`#password_message`).show();

                    /* Reports Checkbox */
                    if(!report_permissions.has_permission){
                        $('#has_permission_status').text("{{ __('entity_forms')['user']['disabled'] }}");
                        $(`#has_permission`).prop('checked', false);
                        reports.forEach(e => {
                            $(`#${e.id}`).prop('checked', false);
                            $(`#${e.id}`).prop('disabled', true);
                            $('.specific_slider').css('cursor', 'not-allowed');
                        });
                    } else{

                        $('#has_permission_status').text("{{ __('entity_forms')['user']['enabled'] }}");
                        $(`#has_permission`).prop('checked', true);

                        reports.forEach(e => {
                            $(`#${e.id}`).prop('disabled', false);
                            $('.specific_slider').css('cursor', 'default');

                            report_name = e.id;
                            if (report_permissions[report_name]){
                                $(`#${e.id}`).prop('checked', true);
                            }
                        });

                    }

                    $('#action').val("Edit");
                    $('#formModal').modal('show');
                }
            })
        });

        // Open For Delete
        $(document).on('click', '.delete', function(){

            var id = $(this).attr('id');

            Swal.fire({
                type: 'warning',
                title: "{{ __('common_responses_and_messages')['confirm_deletion'] }}",
                confirmButtonText: "{{ __('common_actions')['approve'] }} {{ __('common_actions')['confirm_deletion'] }}",
                confirmButtonColor: `#0d6889`,
                showCancelButton: true,
                cancelButtonText: `{{ __('common_actions')['cancel'] }}`,
                cancelButtonColor: `#c82333`
            }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                if (result.value) {
                    $.ajax({
                        url:`/users/${id}/destroy`,
                        success:function(data)
                        {
                            setTimeout(function(){
                                Swal.fire(
                                    "{{ __('common_responses_and_messages')['deleted'] }}",
                                    "{{ __('common_responses_and_messages')['deleted_successfully'] }}",
                                    'success'
                                );
                                $('#user_table').DataTable().ajax.reload(null, false);
                            }, 200);
                        }
                    });
                }
            });
        });

        // Submit Form
        $('#sample_form').on('submit', function(event){
            event.preventDefault();

            if($('#action').val() == 'Add') {
                $.ajax({
                    url:"{{ route('users.store') }}",
                    method:"POST",
                    data: new FormData(this),
                    contentType: false,
                    cache:false,
                    processData: false,
                    dataType:"json",
                    error: function(data){
                        const response = data.responseJSON;

                        // Record limit reached
                        if (response.limit_message) {
                            Swal.fire({
                                title: "{{ __('common_responses_and_messages')['rejected_action'] }}",
                                text: response.limit_message,
                                type:'error'
                            });

                            $('#formModal').modal('hide');
                            return;
                        }

                        // Validator Errors
                        const errors = response.errors;
                        Object.keys(errors).forEach(key => {
                            errors[key].forEach(message => showToast(message, "#C34808", "#78350F"));
                        });

                        return;
                    },
                    success:function(data) {
                        if(data[0] === 'Success') {
                            Swal.fire({
                                title: "{{ __('common_responses_and_messages')['success'] }}",
                                text: "{{ __('common_responses_and_messages')['created_successfully'] }}",
                                type:'success'
                            });
                            $('#sample_form')[0].reset();
                            $('#user_table').DataTable().ajax.reload(null, false);
                        }

                        $('#formModal').modal('hide');
                    },
                });
            }

            if($('#action').val() == "Edit") {
                $.ajax({
                    url:"{{ route('users.update') }}",
                    method:"POST",
                    data:new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false,
                    dataType:"json",
                    error: function(data){
                        const errors = data.responseJSON.errors;
                        Object.keys(errors).forEach(key => {
                            errors[key].forEach(message => showToast(message, "#C34808", "#78350F"));
                        });
                    },
                    success:function(data) {
                        if(data[0] === 'Success') {
                            Swal.fire({
                                title: "{{ __('common_responses_and_messages')['success'] }}",
                                text: "{{ __('common_responses_and_messages')['updated_successfully'] }}",
                                type:'success'
                            });
                            $('#sample_form')[0].reset();
                            $('#user_table').DataTable().ajax.reload(null, false);
                        }
                        $('#formModal').modal('hide');
                    }
                });
            }
        });
    });
</script>

{{-- Permission Controller --}}
<script>
    // User Permissions Control
    var reports = @json($report_types);

    // On role change
    function updateRolePermissions() {
      // Control Variables
        const $has_permission = $('#has_permission');
        const role_value = $('#role').val();

      // Role Permissions
        if (role_value === "administrador") {
            $has_permission.prop('checked', true).trigger("change");
        }
        else if (role_value === "gerente"){
            $has_permission.prop('checked', true).trigger("change");

            reports.forEach(e => {
                $(`#${e.id}`).prop('checked', false);
                $(`#${e.id}`).prop('disabled', false);
                $('.specific_slider').css('cursor', 'default');
            });

            $('#statistical_summaries').prop('checked', true);
            $('#booking_reports').prop('checked', true);
        }
        else {
            $has_permission.prop('checked', false).trigger("change");
        }
    }

    // On General Switch Toggle
    function updateUserPermissions(checkbox_id) {
        // Get the checkbox element
        var checkbox = document.getElementById(checkbox_id);

        if(checkbox.checked){
            $('#has_permission_status').text("{{ __('entity_forms')['user']['enabled'] }}");

            reports.forEach(e => {
                $(`#${e.id}`).prop('checked', true);
                $(`#${e.id}`).prop('disabled', false);
                $('.specific_slider').css('cursor', 'default');
            });

        } else{
            $('#has_permission_status').text("{{ __('entity_forms')['user']['disabled'] }}");
            reports.forEach(e => {
                $(`#${e.id}`).prop('checked', false);
                $(`#${e.id}`).prop('disabled', true);
                $('.specific_slider').css('cursor', 'not-allowed');
            });
        }
    }

</script>

{{-- Support Functions --}}
<script>
  //* Messages
    function showToast(text, gradient_from, gradient_to) {
        Toastify({
            text,
            duration: toast_duration,
            close: false,
            gravity: "bottom",
            position: "center",
            avatar: "{{ asset('images/toast-info-icon.png') }}",
            style: {
                background: `linear-gradient(to right, ${gradient_from}, ${gradient_to})`,
            },
        }).showToast();
    }
</script>