@extends('back.layout')

@section('title')
    بيانات الصورة - كريبتوتاسكي
@endsection

@section('content')
    <div class="content-wrapper content-wrapper--with-bg">
        <h1 class="page-title fw-bold dir">بيانات الصورة</h1>
        <div class="page-content dir">
            <table class="table">
                <thead>
                    <tr>
                        <th class="fw-bold text-center fs-6">#</th>
                        <th class="fw-bold text-center fs-6">{{ $image->id }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="fw-bold text-center fs-6">الصورة</td>
                        <td class="fw-bold text-center fs-6">
                            <img src="{{ $image->getMedia('FixedImages')[0]->getUrl() }}" width="50px" heihgt="50px" alt="">
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-bold text-center fs-6">حالة الصورة</td>
                        <td class="fw-bold text-center fs-6">
                            @if ($image->status == 1)
                                مفعلة
                            @else
                                غير مفعلة
                            @endif
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-bold text-center fs-6">تاريخ الإضافة</td>
                        <td class="fw-bold text-center fs-6">
                            {{ \Carbon\Carbon::parse($image->created_at)->diffForHumans() }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold text-center fs-6">تاريخ اخر تحديث</td>
                        <td class="fw-bold text-center fs-6">
                            {{ \Carbon\Carbon::parse($image->updated_at)->diffForHumans() }}</td>
                    </tr>
                </tbody>
            </table>

            <div class="d-flex justify-content-between">

                @if ($image->status == 1)
                    <a href="" data-bs-toggle="modal" data-bs-target="#NoModal" class="btn btn-warning fw-bold">
                        <i class="fa-solid fa-ban"></i>
                        إلغاء تفعيل
                    </a>
                @else
                    <a href="" data-bs-toggle="modal" data-bs-target="#YesModal" class="btn btn-success fw-bold">
                        <i class="fa-solid fa-check"></i>
                        تفعيل
                    </a>
                @endif

                <a href="" data-bs-toggle="modal" data-bs-target="#deleteModal" class="btn btn-danger fw-bold">
                    <i class="fa-solid fa-trash-can"></i>
                    حذف
                </a>
            </div>
        </div>

    </div>

    {{-- Modals --}}

    {{-- Delete Image Data --}}
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="flex-direction: row-reverse;">
                    <h1 class="modal-title fs-6 fw-bold" id="editModalLabel">حذف الصورة</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body dir">
                    <form action="{{ route('deleteImage') }}" method="POST">

                        @csrf
                        @method('DELETE')

                        <input type="hidden" name="id" value="{{ $image->id }}">

                        <p class="fw-bold text-dark fs-6">
                            <span class="text-danger">*</span>
                            سيتم حذف بيانات الصورة بشكل نهائي ولا يمكن استعادتها فيما بعد
                        </p>

                        <button type="submit" class="btn btn-danger">حذف</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Make Image Available --}}
    <div class="modal fade" id="YesModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="flex-direction: row-reverse;">
                    <h1 class="modal-title fs-6 fw-bold" id="editModalLabel">تفعيل الصورة</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body dir">
                    <form action="{{ route('imageYes') }}" method="POST">

                        @csrf
                        @method('POST')

                        <input type="hidden" name="id" value="{{ $image->id }}">

                        <p class="fw-bold text-dark fs-6">
                            هل تريد تفعيل هذة الصورة ؟
                        </p>

                        <button type="submit" class="btn btn-success">نعم</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{--  Make Image Not Available --}}
    <div class="modal fade" id="NoModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="flex-direction: row-reverse;">
                    <h1 class="modal-title fs-6 fw-bold" id="editModalLabel">إلغاء تفعيل</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body dir">
                    <form action="{{ route('imageNo') }}" method="POST">

                        @csrf
                        @method('POST')

                        <input type="hidden" name="id" value="{{ $image->id }}">

                        <p class="fw-bold text-dark fs-6">
                            هل تريد إلغاء تفعيل هذة الصورة ؟
                        </p>

                        <button type="submit" class="btn btn-danger">نعم</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection