@extends('layouts.main')

@section('main-container')
    <!-- <div class="content d-flex flex-column flex-column-fluid" id="kt_content"> -->
    <!--begin::Toolbar-->
    <style>
        /* .row {
            display: none;
        } */

        table.dataTable>tbody>tr {
            background-color: #dedede;
        }

        div#kt_datatable_example_5_length {
            display: none;
        }

        div#kt_datatable_example_5_filter {
            display: none;
        }

        td {
            background: white !important;
        }

        @font-face {
            font-family: 'OxaniumExtraBold';
            src: url('{{ asset(' /font/Oxanium/static/Oxanium-ExtraBold.ttf') }}') format('truetype');
        }

        @font-face {
            font-family: 'OxaniumMedium';
            src: url('{{ asset(' /font/Oxanium/static/Oxanium-Medium.ttf') }}') format('truetype');
        }

        @font-face {
            font-family: 'OxaniumSemibold';
            src: url('{{ asset(' /font/Oxanium/static/Oxanium-SemiBold.ttf') }}') format('truetype');
        }

        .no-separator {
            border-bottom: none;
        }

        .btn.btn-flex.btn-light.btn-active-primary:hover {
            background-color: transparent !important;
        }

        /* Custom checkbox style */
        .custom-checkbox {
            display: inline-block;
            width: 17px;
            height: 17px;
            background-color: white;
            border: 1px solid #8D99AE;
            border-radius: 3px;
        }

        /* Custom checkmark when checkbox is checked */
        .custom-checkbox:checked::after {
            content: "\2713";
            /* Unicode checkmark character */
            display: block;
            text-align: center;
            font-size: 12px;
            line-height: 17px;
            background: #1b84ff;
        }
    </style>

    <div class="post d-flex flex-column-fluid" id="kt_post">
        <div id="kt_content_container" class="container-xxl mt-4">
            <div class="card" style="margin: 35px 30px 25px 30px;border-radius: 22px;">
                <div data-kt-swapper=" true" data-kt-swapper-mode="prepend"
                    data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}"
                    class="row page-title d-flex align-items-center flex-wrap mt-4 me-3 mb-5 mb-lg-0">
                    <span class="h-20px border-gray-200 border-start mx-2"></span>

                    <!-- User and Page column -->
                    <div class="col-md-3">
                        <img src="{{ url('/media/logos/master1.png') }}" alt="User Icon" class="custom-icon">
                        <a href="#" class="breadcrumb-item text-dark"
                            style="font-family: 'OxaniumSemibold';font-size: 20px;">Admin</a>
                        <span class="bullet bg-gray-200 w-5px h-2px"></span>
                        <svg style="margin-bottom: 6px;" width="8" height="13" viewBox="0 0 8 13" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.25 12L6.75 6.5L1.25 1" stroke="#404155" stroke-width="1.83333"
                                stroke-linecap="round" stroke-linejoin="round" />
                        </svg>

                        <span style="font-size: 18px;margin-left: 10px;">Profile Picture</span>
                    </div>

                    <!-- Search box column -->
                    <div class="col-md-4 mt-3 mt-md-0" style="padding-left: 0px;">
                        <div class="input-group flex-nowrap" style="margin-left: 180px;">
                            <span class="input-group-prepend">
                                <span class="input-group-text"
                                    style="background-color: white;border-right: none;border-radius: unset;height: 44px;border-top-left-radius: 12px;border-bottom-left-radius: 12px;">
                                    <img src="{{ url('/media/logos/search.png') }}" alt="User Icon"
                                        class="custom-icon h-20px w-20px">
                                </span>
                            </span>
                            <input type="text" class="form-control" id="customSearch"
                                style="border-left: none;border-top-right-radius: 12px;border-bottom-right-radius: 12px;width:275px"
                                placeholder="Search Profile Picture">
                        </div>
                    </div>

                    <!-- Filter column -->
                    <div class="col-md-4 mt-3 mt-md-0" style="text-align: right;margin-left: 70px;">

                        <a href="#" class="btn btn-sm btn-primary text-uppercase filter" data-bs-toggle="modal"
                            data-bs-target="#kt_modal_create_app" id="kt_toolbar_primary_button"
                            style="border-radius: 10px;">Create Profile Picture</a>
                    </div>

                </div>
                <hr style="background: #e1e3ec;width: 95%;margin-left: 1.8rem;border: 1px solid #e1e3ec;">
                <div class="card-body pt-0">
                    <table class="table align-middle fs-6 gy-5" id="kt_datatable_example_5">
                        <thead>
                            <tr class="text-start text-muted fw-bolder fs-7 gs-0">
                                <th class="d-flex w-10px pe-2">
                                    <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                                        ID
                                    </div>
                                </th>
                                <th class="min-w-125px">Image</th>
                                <th class="min-w-125px">Created Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody class="text-gray-600 fw-bold">
                            @foreach ($ProfilePictures as $row)
                                <tr>
                                    <td>
                                        {{ $row->id }}
                                    </td>
                                    <td>
                                        <img src="{{ $row->image }}" alt="" width="60px" height="50px">
                                    </td>
                                    <td>{{ date("d-m-Y", strtotime($row->created_at)) }}</td>
                                    <td>
                                        <div class="d-flex">
                                            <a href="#" class="text-danger" data-toggle="tooltip"
                                                onclick="confirmDelete({{ $row->id }})" data-placement="top"
                                                title="Delete">
                                                <svg width="18" height="19" viewBox="0 0 18 19" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M2 5H3.5H15.5" stroke="#FF0101" stroke-width="1.5"
                                                        stroke-linecap="round" stroke-linejoin="round" />
                                                    <path
                                                        d="M14 5V15.5C14 15.8978 13.842 16.2794 13.5607 16.5607C13.2794 16.842 12.8978 17 12.5 17H5C4.60218 17 4.22064 16.842 3.93934 16.5607C3.65804 16.2794 3.5 15.8978 3.5 15.5V5M5.75 5V3.5C5.75 3.10218 5.90804 2.72064 6.18934 2.43934C6.47064 2.15804 6.85218 2 7.25 2H10.25C10.6478 2 11.0294 2.15804 11.3107 2.43934C11.592 2.72064 11.75 3.10218 11.75 3.5V5"
                                                        stroke="#FF0101" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                    <path d="M7.25 8.75V13.25" stroke="#FF0101" stroke-width="1.5"
                                                        stroke-linecap="round" stroke-linejoin="round" />
                                                    <path d="M10.25 8.75V13.25" stroke="#FF0101" stroke-width="1.5"
                                                        stroke-linecap="round" stroke-linejoin="round" />
                                                </svg>
                                            </a>
                                        </div>
                                        <form id="delete-form-{{ $row->id }}"
                                            action="{{ route('profile_picture.destroy', $row->id) }}" method="POST"
                                            style="display: none;">
                                            @csrf
                                            @method('DELETE')

                                        </form>
                                    </td>
                                </tr>
                            @endforeach

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- </div> -->
        <div class="modal fade" id="kt_modal_create_app" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered mw-900px">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2>Create Profile Picture</h2>
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                            <span class="svg-icon svg-icon-1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="black" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="black" />
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div class="modal-body">
                        <form id="profile_picture_form" action="{{ route('profile_picture.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="mb-3">
                                <label for="image" class="form-label">Image</label>
                                <input type="file" class="form-control" name="image" required>
                            </div>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var baseUrl = @json(url('/'));

        function confirmDelete(profilePictureId) {
            var confirmation = confirm('Are you sure you want to delete this profile picture?');

            if (confirmation) {
                document.getElementById('delete-form-' + profilePictureId).submit();
            }
        }

    </script> 
    <script>
        $(document).ready(function() {
            $.validator.addMethod("imageExtension", function(value, element) {
                return this.optional(element) || /\.(png|jpeg|jpg)$/i.test(value);
            }, "Please upload a file in PNG or JPEG format.");
            
            $("#profile_picture_form").validate({
                rules: {
                    image: {
                        required: true,
                        imageExtension: true // Use the custom rule
                    }
                },
                messages: {
                    image: {
                        required: "Please upload an image.",
                        imageExtension: "Only PNG and JPEG images are allowed."
                    }
                },
                errorPlacement: function ( error, element ) {
                    if ( element.prop( "type" ) === "checkbox" ) {
                        error.insertAfter( $(element).siblings(":last") );
                    } else {
                        error.insertAfter( element );
                    }
                },
            });

            var table = $('#kt_datatable_example_5').DataTable();
            table.order([1, 'asc']).draw();

            $('#customSearch').on('input', function() {
                table.search(this.value).draw();
            });

        });
    </script>
@endsection