{{-- resources/views/toilets/index.blade.php --}}
<x-admin.layout>
    <x-slot name="title">Certificates</x-slot>
    <x-slot name="heading">Certificates</x-slot>

    <style>
        .equal-height {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
    </style>
    @can('certificate.create')
        <div class="row mb-5">
            <div class="col-12">
                <form action="" class="theme-form" name="addForm" id="addForm">
                    @csrf
                    <div class="d-flex align-items-end justify-content-between">
                        <div class="col-8">
                            <label for="file" class="form-label">Upload Certificate</label>
                            <input type="file" name="file" id="file" class="form-control"
                                accept=".jpg, .jpeg, .png, .gif, .pdf">
                            <span class="text-danger is-invalid file_err"></span>
                        </div>

                        <div class="col-2">
                            <div class="text-center">
                                <button type="submit" class="btn btn-primary w-100">Submit</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endcan


    <div class="row d-flex flex-wrap" id="certificates-list">
        @foreach ($certificates as $index => $certificate)
            <div class="col-md-6 mb-3" id="certificate-{{ $certificate->id }}" style="height: 40rem;">
                <div class="card equal-height position-relative shadow-sm p-2">
                    @can('certificate.delete')
                        <div class="position-absolute top-0 end-0 m-2 d-flex gap-1">
                            <button class="btn text-danger rem-element px-2 py-1" title="Delete Certificate"
                                data-id="{{ $certificate->id }}"><i data-feather="trash-2"></i> </button>
                        </div>
                    @endcan

                    <div class="card-body text-center">
                        <h6 class="card-title text-start mb-3">#{{ $index + 1 }}</h6>

                        @php
                            $ext = pathinfo($certificate->file, PATHINFO_EXTENSION);
                            $fileUrl = asset('storage/' . $certificate->file);
                        @endphp


                        @if (in_array(strtolower($ext), ['jpg', 'jpeg', 'png', 'gif']))
                            <img src="{{ $fileUrl }}" alt="file" class="img-thumbnail"
                                style="max-height: 400px; width: auto;">
                        @elseif(strtolower($ext) === 'pdf')
                            <object data="{{ $fileUrl }}#toolbar=0&navpanes=0&scrollbar=0" type="application/pdf"
                                class="img-thumbnail" style="width: 100%; height: 90%;">
                                <p>PDF cannot be displayed. <a href="{{ $fileUrl }}" target="_blank">Download
                                        PDF</a></p>
                            </object>
                        @else
                        @endif

                    </div>

                    <div class="card-footer text-center">
                        <a href="{{ $fileUrl }}" target="_blank" class="btn btn-primary mt-2"> View File </a>
                    </div>

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



</x-admin.layout>




{{-- Add --}}
<script>
    $("#addForm").submit(function(e) {
        e.preventDefault();
        $("#addSubmit").prop('disabled', true);
        var url = "{{ route('certificate.store') }}";
        var formdata = new FormData(this);
        $.ajax({
            url: url,
            type: 'POST',
            data: formdata,
            contentType: false,
            processData: false,
            success: function(data) {
                $("#addSubmit").prop('disabled', false);
                if (!data.error2)
                    swal("Successful!", data.success, "success")
                    .then((action) => {
                        window.location.href = '{{ route('certificate.index') }}';
                    });
                else
                    swal("Error!", data.error2, "error");
            },
            statusCode: {
                422: function(responseObject, textStatus, jqXHR) {
                    $("#addSubmit").prop('disabled', false);
                    resetErrors();
                    printErrMsg(responseObject.responseJSON.errors);
                },
                500: function(responseObject, textStatus, errorThrown) {
                    $("#addSubmit").prop('disabled', false);
                    swal("Error occured!", "Something went wrong please try again", "error");
                }
            }
        });

    });
</script>


<!-- Edit -->
<script>
    $("#buttons-datatables").on("click", ".edit-element", function(e) {
        e.preventDefault();
        // $(".edit-element").show();
        var model_id = $(this).attr("data-id");
        var url = "{{ route('certificate.edit', ':model_id') }}";

        $.ajax({
            url: url.replace(':model_id', model_id),
            type: 'GET',
            data: {
                '_token': "{{ csrf_token() }}"
            },
            success: function(data, textStatus, jqXHR) {
                editFormBehaviour();

                if (!data.error) {
                    $("#editForm input[name='edit_model_id']").val(data.maintenance_task.id);
                } else {
                    swal("Error!", data.error, "error");
                }
            },
            error: function(error, jqXHR, textStatus, errorThrown) {
                swal("Error!", "Some thing went wrong", "error");
            },
        });
    });
</script>


<!-- Update -->
<script>
    $(document).ready(function() {
        $("#editForm").submit(function(e) {
            e.preventDefault();
            $("#editSubmit").prop('disabled', true);
            var formdata = new FormData(this);
            formdata.append('_method', 'PUT');
            var model_id = $('#edit_model_id').val();
            var url = "{{ route('certificate.update', ':model_id') }}";
            //
            $.ajax({
                url: url.replace(':model_id', model_id),
                type: 'POST',
                data: formdata,
                contentType: false,
                processData: false,
                success: function(data) {
                    $("#editSubmit").prop('disabled', false);
                    if (!data.error2)
                        swal("Successful!", data.success, "success")
                        .then((action) => {
                            window.location.href =
                                '{{ route('certificate.index') }}';
                        });
                    else
                        swal("Error!", data.error2, "error");
                },
                statusCode: {
                    422: function(responseObject, textStatus, jqXHR) {
                        $("#editSubmit").prop('disabled', false);
                        resetErrors();
                        printErrMsg(responseObject.responseJSON.errors);
                    },
                    500: function(responseObject, textStatus, errorThrown) {
                        $("#editSubmit").prop('disabled', false);
                        swal("Error occured!", "Something went wrong please try again",
                            "error");
                    }
                }
            });

        });
    });
</script>


<!-- Delete -->
<script>
    $(document).on("click", ".rem-element", function(e) {
        e.preventDefault();
        swal({
                title: "Are you sure to delete this cartifiate file?",
                // text: "Make sure if you have filled Vendor details before proceeding further",
                icon: "info",
                buttons: ["Cancel", "Confirm"]
            })
            .then((justTransfer) => {
                if (justTransfer) {
                    var model_id = $(this).attr("data-id");
                    var url = "{{ route('certificate.destroy', ':model_id') }}";

                    $.ajax({
                        url: url.replace(':model_id', model_id),
                        type: 'POST',
                        data: {
                            '_method': "DELETE",
                            '_token': "{{ csrf_token() }}"
                        },
                        success: function(data, textStatus, jqXHR) {
                            if (!data.error && !data.error2) {
                                swal("Success!", data.success, "success")
                                    .then((action) => {
                                        window.location.reload();
                                    });
                            } else {
                                if (data.error) {
                                    swal("Error!", data.error, "error");
                                } else {
                                    swal("Error!", data.error2, "error");
                                }
                            }
                        },
                        error: function(error, jqXHR, textStatus, errorThrown) {
                            swal("Error!", "Something went wrong", "error");
                        },
                    });
                }
            });
    });
</script>