@extends('backend.layouts.app')
@section('content')
<style>
    .chosen-container {
        width: 100% !important;
    }

    .chosen-container-multi .chosen-choices {
        padding: 8px;
        border-radius: 7px;
        background-color: none !important;
        background-image: none !important;
    }
</style>
<h4 class="py-3 mb-4">
    @lang('messages.files.files_list')
</h4>
<div class="card">
    <div class="card-datatable table-responsive datatable-roles">
        @if(auth()->user()->hasRole('Super Admin') || auth()->user()->hasPermissionTo('Create File'))
        <div class="text-end m-4">
            <a href="javascript:;" class="btn btn-primary me-4 px-4" data-bs-target="#addFile" data-bs-toggle="modal"><i class="ri-add-line"></i> @lang('messages.files.add_new_file')</a>
        </div>
        @endif
        <table class="datatables-menus table" id="dataTableFileList">
            <thead>
                <tr>
                    <th>@lang('messages.files.sr_no')</th>
                    <th>@lang('messages.files.file_name')</th>
                    <th>@lang('messages.files.file_password')</th>
                    <th>@lang('messages.files.windows_url')</th>
                    <th>@lang('messages.files.mac_url')</th>
                    <th>Mobile url</th>
                    <th>@lang('messages.files.type')</th>
                    <th>Redirect</th>
                    <th>@lang('messages.files.status')</th>
                    <th>Date</th>
                    <th>@lang('messages.files.action')</th>
                </tr>
            </thead>
            <tbody>
                <!-- Table body content goes here -->
            </tbody>
        </table>
    </div>
</div>
<div class="modal fade" id="addFile" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-simple modal-Add-user">
        <div class="modal-content">
            <div class="modal-body p-0">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="text-center mb-6">
                    <h4 class="mb-2">@lang('messages.files.add_new_file')</h4>
                    <p class="mb-6">@lang('messages.files.add_new_file_sub').</p>
                </div>
                <form id="addFileForm" action="{{ route('files.store') }}" class="row g-5">
                    @csrf
                    <div class="col-12 col-md-6">
                        <div class="form-floating form-floating-outline">
                            <input type="text" id="file_name" name="file_name" class="form-control" placeholder="@lang('messages.files.file_name')" />
                            <label for="file_name">@lang('messages.files.file_name')</label>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="form-floating form-floating-outline">
                            <input type="text" id="file_password" name="file_password" class="form-control" placeholder="@lang('messages.files.file_password')" />
                            <label for="file_password">@lang('messages.files.file_password')</label>
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="form-floating form-floating-outline">
                            <select id="file_status" name="file_status" class="form-select" aria-label="Default select example">
                                <option value="ACTV" selected>@lang('messages.files.active')</option>
                                <option value="NACT">@lang('messages.files.inactive')</option>
                            </select>
                            <label for="file_status">@lang('messages.files.status')</label>
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="form-floating form-floating-outline">
                            <select id="file_redirect" name="file_redirect" class="form-select" aria-label="Default select example">
                                <option value="ACTV" selected>@lang('messages.files.active')</option>
                                <option value="NACT">@lang('messages.files.inactive')</option>
                            </select>
                            <label for="file_redirect">Redirect</label>
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="form-floating form-floating-outline">
                            <select id="file_type" name="file_type" class="form-select" aria-label="Default select example">
                                <option value="GNRL" selected>@lang('messages.files.general')</option>
                                <option value="USER">@lang('messages.files.user')</option>
                            </select>
                            <label for="file_type">@lang('messages.files.type')</label>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="form-floating form-floating-outline">
                            <input type="text" id="windows_url" name="windows_url" class="form-control" placeholder="@lang('messages.files.windows_url')" />
                            <label for="windows_url">@lang('messages.files.windows_url')</label>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="form-floating form-floating-outline">
                            <input type="text" id="mac_url" name="mac_url" class="form-control" placeholder="@lang('messages.files.mac_url')" />
                            <label for="mac_url">@lang('messages.files.mac_url')</label>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="form-floating form-floating-outline">
                            <input type="text" id="mobile_url" name="mobile_url" class="form-control" placeholder="Mobile url" />
                            <label for="mobile_url">Mobile url</label>
                        </div>
                    </div>
                    <div class="col-12 col-md-12" id="id_users_data" style="display: none;">
                        <div class="form-floating form-floating-outline">
                            <select multiple class="form-control multipleChosen" id="id_users" name="id_users[]" >
                                @foreach($users as $user)
                                <option value="{{ $user->id }}">{{ $user->first_name }} {{ $user->last_name }}</option>
                                @endforeach
                            </select>
                            <label for="edit_id_user">@lang('messages.files.select_user')</label>
                        </div>
                    </div>

                    <div class="col-12 text-center">
                        <button type="submit" class="btn btn-primary me-3">@lang('messages.files.submit')</button>
                        <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal" aria-label="Close">@lang('messages.files.cancel')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- <div class="modal fade " id="editFileModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-simple modal-Add-user">
        <div class="modal-content">
            <div class="modal-body p-0">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="text-center mb-E6">
                    <h4 class="mb-2">@lang('messages.files.update_file')</h4>
                    <p class="mb-6">@lang('messages.files.update_file_sub').</p>
                </div>
                <form id="editFileForm" action="" class="row g-5">
                    @csrf
                    @method('PUT')
                    <div class="col-12 col-md-8">
                        <div class="form-floating form-floating-outline">
                            <input type="text" id="edit_file_password" value="" name="file_password" class="form-control" placeholder="@lang('messages.files.file_password')" />
                            <label for="edit_file_password">@lang('messages.files.file_password')</label>
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="form-floating form-floating-outline">
                            <select id="edit_file_status" name="file_status" class="form-select" aria-label="Default select example">
                                <option value="ACTV" selected>@lang('messages.files.active')</option>
                                <option value="NACT">@lang('messages.files.inactive')</option>
                            </select>
                            <label for="edit_file_status">@lang('messages.files.status')</label>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="form-floating form-floating-outline">
                            <input type="text" id="edit_windows_url" value="" name="windows_url" class="form-control" placeholder="@lang('messages.files.windows_url')" />
                            <label for="edit_windows_url">@lang('messages.files.windows_url')</label>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="form-floating form-floating-outline">
                            <input type="text" class="form-control" id="edit_mac_url" name="mac_url" placeholder="@lang('messages.files.mac_url')" value="" aria-describedby="basic-url24">
                            <label for="edit_mac_url">@lang('messages.files.mac_url')</label>
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-floating form-floating-outline">
                            <select multiple class="form-control multiselect" id="edit_id_user" name="id_user" >
                                <option>HTML</option>
                                <option>CSS</option>
                                <option>JavaScript</option>
                                <option>PHP</option>
                                <option>MySQL</option>
                            </select>
                            <label for="edit_id_user">@lang('messages.files.user')</label>
                        </div>
                    </div>

                    <div class="col-12 text-center">
                        <button type="submit" class="btn btn-primary me-3">@lang('messages.files.submit')</button>
                        <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal" aria-label="Close">@lang('messages.files.cancel')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div> -->


<!-- / Content -->
@endsection
@section('footer_scripts')
<script>
    $(document).ready(function() {
        $("#file_type").on("change", function() {
            if($(this).val() == 'GNRL')
                $("#id_users_data").hide()
            else
                $("#id_users_data").show()
        })

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $("body").on("click", ".editFile", function() {
            jQuery.ajax({
                url: $(this).data('href'),
                type: 'get',
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function(data) {
                    if (data.status) {
                        $("#editFileForm").val(data.id);
                        $("#edit_file_name").val(data.file_name);
                        $("#edit_file_password").val(data.file_password);
                        $("#edit_windows_url").val(data.windows_url);
                        $("#edit_mac_url").val(data.mac_url);
                        $("#edit_mobile_url").val(data.mobile_url);
                        $("#edit_file_redirect").val(data.file_redirect);
                        $("#edit_file_status").val(data.file_status);
                        $("#editFileForm").attr('action', data.route);
                        $("#editFileModal").modal('show');
                    } else {
                        // Handle the case where the menu is not found
                        alert('Menu not found');
                    }
                },
                error: function(xhr, status, error) {
                    var jsonResponse = JSON.parse(xhr.responseText);
                    var locale = '{{ app()->getLocale() }}'; // Get the current application locale
                    if (locale == 'en') {
                        // English error messages
                        var errorMessage = "Validation failed";
                    } else if (locale == 'ro') {
                        // Romanian error messages
                        errorMessage = "Validarea a eșuat";
                    } else if (locale == 'ar') {
                        // Arabic error messages
                        errorMessage = "فشل التحقق من الصحة";
                    } else {
                        // Default to English
                        // errorMessage += Object.values(errors).join(", ");
                    }
                    if (jsonResponse.errors) {
                        errorMessage += ":<br> ";
                        errorMessage += Object.values(jsonResponse.errors).join(
                            "<br>");
                        Swal.fire('', errorMessage, 'error')
                    }
                }
            })
        });


        var table = $("#dataTableFileList").DataTable({
            processing: true,
            serverSide: true,
            order: [[0, 'DESC']],
            ajax: "{{ route('files.index') }}",
            columns: [
                {  data: "DT_RowIndex", name: 'id' },
                { data: "file_name" },
                { data: "file_password" },
                { data: "windows_url" },
                { data: "mac_url" },
                { data: "mobile_url" },
                { data: "file_type" },
                { data: "file_redirect" },
                { data: "file_status" },
                { data: "created_at_nice", type: 'date' },
                { data: "action" },
            ],
            columnDefs : [
                {"targets":7, "type":"date-eu"}
            ],
        });

        $("#addFileForm").submit(function(e) {
            e.preventDefault();
        }).validate({
            rules: {
                file_password: {
                    required: true,
                    maxlength: 255
                },
                windows_url: {
                    required: true,
                    maxlength: 255
                },
                mac_url: {
                    required: true,
                    maxlength: 255
                },
                mobile_url: {
                    required: true,
                    maxlength: 255
                },
                file_status: {
                    required: true,
                },
                file_redirect: {
                    required: true,
                },
                file_type: {
                    required: true,
                }
            },

            errorElement: 'span',
            submitHandler: function(form) {
                var formData = new FormData(form);

                $.ajax({
                    url: $(form).attr('action'),
                    data: formData,
                    type: 'POST',
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        if (data.status) {
                            Swal.fire({
                                title: data.title,
                                text: data.message,
                                icon: 'success',
                            });
                            $(form)[0].reset();
                            $("#addFile").modal('hide');
                            table.ajax.reload();

                            // // Refresh user_details div

                        }
                    },
                    error: function(xhr, status, error) {
                        var jsonResponse = JSON.parse(xhr.responseText);
                        var locale = '{{ app()->getLocale() }}'; // Get the current application locale
                        $("#addFile").modal('hide');
                        if (locale == 'en') {
                            // English error messages
                            var errorMessage = "Validation failed";
                        } else if (locale == 'ro') {
                            // Romanian error messages
                            errorMessage = "Validarea a eșuat";
                        } else if (locale == 'ar') {
                            // Arabic error messages
                            errorMessage = "فشل التحقق من الصحة";
                        } else {
                            // Default to English
                            // errorMessage += Object.values(errors).join(", ");
                        }
                        if (jsonResponse.errors) {
                            errorMessage += ":<br> ";
                            errorMessage += Object.values(jsonResponse.errors).join(
                                "<br>");
                            Swal.fire('', errorMessage, 'error')
                        }
                    }

                });
                return false;
            }
        });

        $("#editFileForm").submit(function(e) {
            e.preventDefault();
        }).validate({
            rules: {
                edit_file_password: {
                    required: true,
                    maxlength: 255
                },
                edit_windows_url: {
                    required: true,
                    maxlength: 255
                },
                edit_mac_url: {
                    required: true,
                    maxlength: 255
                },
                edit_mobile_url: {
                    required: true,
                    maxlength: 255
                },
                edit_file_status: {
                    required: true,
                },
                edit_file_type: {
                    required: true,
                },
                edit_file_redirect: {
                    required: true,
                }
            },

            errorElement: 'span',
            submitHandler: function(form) {
                var formData = new FormData(form);
                jQuery.ajax({
                    url: jQuery('#editFileForm').attr('action'),
                    data: formData,
                    type: 'POST',
                    dataType: 'json',
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        if (data.status) {
                            Swal.fire({
                                title: data.title,
                                text: data.message,
                                icon: 'success',
                            });
                            $(form)[0].reset();
                            $("#editFileModal").modal('hide');
                            table.ajax.reload();
                        }
                    },
                    error: function(xhr, status, error) {
                        var jsonResponse = JSON.parse(xhr.responseText);
                        var locale = '{{ app()->getLocale() }}'; // Get the current application locale
                        $("#editFileModal").modal('hide');
                        if (locale == 'en') {
                            // English error messages
                            var errorMessage = "Validation failed";
                        } else if (locale == 'ro') {
                            // Romanian error messages
                            errorMessage = "Validarea a eșuat";
                        } else if (locale == 'ar') {
                            // Arabic error messages
                            errorMessage = "فشل التحقق من الصحة";
                        } else {
                            // Default to English
                            // errorMessage += Object.values(errors).join(", ");
                        }
                        if (jsonResponse.errors) {
                            errorMessage += ":<br> ";
                            errorMessage += Object.values(jsonResponse.errors).join(
                                "<br>");
                            Swal.fire('', errorMessage, 'error')
                        }
                    }
                });
                return false;
            }
        });

        //Chosen
        $(".multipleChosen").chosen({
            placeholder_text_multiple: "Select user" //placeholder
        });
    });
</script>
@endsection