@extends('backend.layouts.app')
<style>
    .truncate > a {
        color: #348fe2;
    }
</style>
@section('content')
<h1 class="page-header">
    @lang('messages.landings.landings_list') 
    @if(auth()->user()->hasRole('Super Admin') || auth()->user()->hasPermissionTo('Create Landing'))
    <div class="float-right">
        <a href="javascript:;" class="btn btn-primary" data-target="#addLanding" data-toggle="modal"><i class="fa fa-plus-circle"></i> @lang('messages.landings.add_new_landing')</a>
    </div>
    @endif
</h1>
<div class="panel panel-inverse">
    <div class="panel-heading">
        <h4 class="panel-title">@lang('messages.landings.landings_list')</h4>
        <div class="panel-heading-btn">
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success reload" data-id="dataTableLandingList"><i class="fa fa-redo"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
        </div>
    </div>
    <div class="panel-body">
        <table class="datatables-menus table" id="dataTableLandingList">
            <thead>
                <tr>
                    <th>@lang('messages.landings.sr_no')</th>
                    <th>@lang('messages.landings.user')</th>
                    <th>@lang('messages.landings.file')</th>
                    <th>@lang('messages.landings.landing_url')</th>
                    <th>@lang('messages.landings.landing_type')</th>
                    <th>@lang('messages.landings.status')</th>
                    <th>Date</th>
                    <th width="120px">@lang('messages.landings.action')</th>
                </tr>
            </thead>
            <tbody>
                <!-- Table body content goes here -->
            </tbody>
        </table>
    </div>
</div>
<div class="modal fade" id="addLanding" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">@lang('messages.landings.add_new_landing')</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <form id="addLandingForm" action="{{ route('landings.store') }}">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 col-md-8">
                            <div class="form-group">
                                <label for="landing_url">@lang('messages.landings.landing_url')</label>
                                <input type="text" id="landing_url" name="landing_url" class="form-control" placeholder="@lang('messages.landings.landing_url')" />
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="form-group">
                                <label for="landing_type">@lang('messages.landings.landing_type')</label>
                                <select id="landing_type" name="landing_type" class="form-control" aria-label="Default select example">
                                    <option value="LNDG">@lang('messages.landings.landing')</option>
                                    <option value="MACLNDG">@lang('messages.landings.maclanding')</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="id_file">@lang('messages.landings.file')</label>
                                <select id="id_file" name="id_file" class="form-control" aria-label="Default select example">
                                    <option value="">General</option>
                                    @foreach($files as $file)
                                    <option value="{{ $file->id }}">{{ $file->file_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="landing_status">@lang('messages.landings.status')</label>
                                <select id="landing_status" name="landing_status" class="form-control" aria-label="Default select example">
                                    <option value="ACTV">@lang('messages.landings.active')</option>
                                    <option value="NACT">@lang('messages.landings.inactive')</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="reset" class="btn btn-white" data-dismiss="modal">@lang('messages.landings.cancel')</button>
                        <button type="submit" class="btn btn-success">@lang('messages.landings.submit')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="editLandingModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">@lang('messages.landings.update_landing')</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <form id="editLandingForm" action="">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 col-md-8">
                            <div class="form-group">
                                <label for="landing_url">@lang('messages.landings.landing_url')</label>
                                <input type="text" id="edit_landing_url" name="landing_url" class="form-control" placeholder="@lang('messages.landings.landing_url')" />
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="form-group">
                                <label for="landing_type">@lang('messages.landings.landing_type')</label>
                                <select id="edit_landing_type" name="landing_type" class="form-control" aria-label="Default select example">
                                    <option value="LNDG">@lang('messages.landings.landing')</option>
                                    <option value="MACLNDG">@lang('messages.landings.maclanding')</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="edit_id_file">@lang('messages.landings.file')</label>
                                <select id="edit_id_file" name="id_file" class="form-control" aria-label="Default select example">
                                    <option value="">General</option>
                                    @foreach($files as $file)
                                    <option value="{{ $file->id }}">{{ $file->file_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="landing_status">@lang('messages.landings.status')</label>
                                <select id="edit_landing_status" name="landing_status" class="form-control" aria-label="Default select example">
                                    <option value="ACTV">@lang('messages.landings.active')</option>
                                    <option value="NACT">@lang('messages.landings.inactive')</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="reset" class="btn btn-white" data-dismiss="modal">@lang('messages.landings.cancel')</button>
                    <button type="submit" class="btn btn-success">@lang('messages.landings.submit')</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- / Content -->
@endsection

@section('footer_scripts')
<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $("body").on("click", ".editLanding", function() {
            jQuery.ajax({
                url: $(this).data('href'),
                type: 'get',
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function(data) {
                    if (data.status) {
                        $("#edit_landing_url").val(data.landing_url);
                        $("#edit_landing_type").val(data.landing_type);
                        $("#edit_id_file").val(data.id_file);
                        $("#edit_landing_status").val(data.landing_status);
                        $("#editLandingForm").attr('action', data.route);
                        $("#editLandingModal").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 = $("#dataTableLandingList").DataTable({
            processing: true,
            serverSide: true,
            order: [[0, 'desc']],
            ajax: {
                "url": "{{ route('landings.index') }}",
                "type": "GET",
                "data": function(d) {
                    d.landing_type = 'LNDG';
                }
            },
            columns: [
                { data: "DT_RowIndex", name: "id" },
                { data: "user.first_name" },
                { data: "file_name" },
                { data: "landing_url" },
                { data: "landing_type" },
                { data: "landing_status" },
                { data: "created_at_nice", type: 'date' },
                { data: "action", sortable:false },
            ],
            columnDefs : [
                {"targets":6, "type":"date-eu"}
            ],
        });

        $("#addLandingForm").submit(function(e) {
            e.preventDefault();
        }).validate({
            rules: {
                landing_title: {
                    required: true,
                    maxlength: 255
                },
                landing_type: {
                    required: true,
                },
                landing_status: {
                    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();
                            $("#addLanding").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
                        $("#addLanding").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;
            }
        });


        $("#editLandingForm").submit(function(e) {
            e.preventDefault();
        }).validate({
            rules: {
                landing_title: {
                    required: true,
                    maxlength: 255
                },
                landing_type: {
                    required: true,
                },
                landing_status: {
                    required: true,
                }
            },

            errorElement: 'span',
            submitHandler: function(form) {
                var formData = new FormData(form);
                jQuery.ajax({
                    url: jQuery('#editLandingForm').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',
                            });
                            $('#editLandingForm')[0].reset();
                            $("#editLandingModal").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
                        $("#editLandingModal").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;
            }
        });
    });
</script>
@endsection