@extends('back.layout')

@section('title')
    {{ __('ll1') }}
@endsection

@section('content')
    <div class="content-wrapper content-wrapper--with-bg">
        <div class="d-flex justify-content-between" style="flex-direction: row-reverse;">
            <div>
                <h1 class="page-title fw-bold dir">{{ __('ll1') }}</h1>
            </div>

            <div>
                <a href="" data-bs-toggle="modal" data-bs-target="#DelTaskImage" class="btn btn-danger fw-bold fs-6">
                    <i class="fa-solid fa-trash"></i>
                </a>
                
                <a href="" data-bs-toggle="modal" data-bs-target="#newImage" class="btn btn-primary fw-bold fs-6">
                    <i class="fa-solid fa-plus"></i>
                </a>

                
                <a href="" data-bs-toggle="modal" data-bs-target="#deleteAll" class="btn btn-danger fw-bold fs-6">
                    <i class="fa-solid fa-trash-can"></i>
                </a>
            </div>
        </div>

        <div class="page-content dir">

            {{-- All Images --}}
            @if (count($images) > 0)
                <div id="images">
                    <table class="table w-100">
                        <thead>
                            <tr>
                                <th class="fs-6 fw-bold text-center sort" data-sort="image">الصورة</th>
                                <th class="fs-6 fw-bold text-center sort" data-sort="task">معرف المهمة</th>
                                <th class="fs-6 fw-bold text-center sort" data-sort="name">عنوان المهمة</th>
                                <th class="fs-6 fw-bold text-center"></th>
                            </tr>
                        </thead>
                        <tbody class="list">
                            @foreach ($images as $taskID => $image)
                                @foreach ($image as $single)
                                <tr>
                                    <td class="fs-6 fw-bold text-center image">
                                        <a href="{{ $single }}" target="_blank">
                                            <img src="{{ $single }}" width="100px" height="100px" alt="">
                                        </a>
                                    </td>
                                    <td class="fs-6 fw-bold text-center task">
                                        {{ $taskID }}
                                    </td>
                                    <td class="text-center fs-6 fw-bold name">
                                        {{ App\Models\Task::find($taskID)->title }}
                                    </td>
                                    <td>
                                        <form action="{{ route('deleteSingleImage') }}" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <input type="hidden" name="taskID" value="{{ $taskID }}" required/>
                                            <input type="hidden" name="image" value="{{ $single }}" required/>
                                            <button class="btn btn-danger" type="submit">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                @endforeach
                            @endforeach
                        </tbody>
                    </table>
                    <ul class="pagination"></ul>
                </div>
            @else
                <p class="fw-bold text-center text-dark fs-4">
                    لا يوجد اي صور بعد
                </p>
            @endif

        </div>
    </div>

    {{-- Modals --}}

    {{-- New Image --}}
    <div class="modal fade" id="newImage" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="flex-direction: row-reverse;">
                    <h5 class="modal-title fw-bold fs-6" id="staticBackdropLabel">إضافة صور جديدة</h5>
                    <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <form action="{{ route('SaveImages') }}" method="POST" enctype="multipart/form-data">

                        @csrf
                        @method('POST')

                        <div class="mb-3 dir">
                            <label for="task_id" class="mb-1 fw-bold text-dark">{{ __('ll2') }}</label>
                            <select class="form-select fw-bold" id="task_id" name="task_id" required>
                              @foreach (\App\Models\Task::where('status', '=', 1)->where('type', '!=', '1')->get() as $task)
                                  <option value="{{ $task->id }}">{{ $task->title }} || {{ $task->description }} || 
                                  @if ($task->type == 1)
                                  {{ __('b11') }}
                                  @elseif ($task->type == 2)
                                  {{ __('b12') }}
                                  @elseif ($task->type == 3)
                                  {{ __('b13') }}
                                  @endif
                                  </option>
                              @endforeach
                            </select>
                        </div>

                        <div class="mb-3 dir">
                            <label for="file" class="mb-1 fw-bold text-dark">{{ __('ll3') }} <span class="text-danger">*</span></label>
                            <input type="file" name="image[]" id="file" class="form-control shadow-none fw-bold text-dark" accept="image/*" multiple required>
                        </div>

                        <button type="button" class="btn btn-secondary shadow-none fw-bold fs-6" data-bs-dismiss="modal">إلغاء</button>
                        <button class="btn btn-primary fw-bold fs-6 shadow-none" type="submit">إضافة</button>

                    </form>

                </div>
            </div>
        </div>
    </div>

    {{-- Delete Task Images --}}
    <div class="modal fade" id="DelTaskImage" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="flex-direction: row-reverse;">
                    <h5 class="modal-title fw-bold fs-6" id="staticBackdropLabel">حذف كل صور المهمة</h5>
                    <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <form action="{{ route('DelTaskImages') }}" method="POST">

                        @csrf
                        @method('POST')

                        <div class="mb-3 dir">
                            <label for="task_id" class="mb-1 fw-bold text-dark">{{ __('ll6') }}</label>
                            <select class="form-select fw-bold" id="task_id" name="task_id" required>
                              @foreach (\App\Models\Task::where('status', '=', 1)->where('type', '!=', '1')->get() as $task)
                                  <option value="{{ $task->id }}">{{ $task->title }} || {{ $task->description }} || 
                                  @if ($task->type == 1)
                                  {{ __('b11') }}
                                  @elseif ($task->type == 2)
                                  {{ __('b12') }}
                                  @elseif ($task->type == 3)
                                  {{ __('b13') }}
                                  @endif
                                  </option>
                              @endforeach
                            </select>
                        </div>

                        <button type="button" class="btn btn-secondary shadow-none fw-bold fs-6" data-bs-dismiss="modal">إلغاء</button>
                        <button class="btn btn-danger fw-bold fs-6 shadow-none" type="submit">حذف</button>

                    </form>

                </div>
            </div>
        </div>
    </div>

    {{-- Delete All Images --}}
    <div class="modal fade" id="deleteAll" 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('deleteAllImages') }}" method="POST">

                        @csrf
                        @method('DELETE')

                        <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>
@endsection

@section('jss')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.0.2/list.min.js"
        integrity="sha512-MT5YyrGWqMGkIbwkVUZEWGrRDjlNx8loukEdFyzLo4s8INKVxnDQy2eFcpmnWGrFwJ+X8mRTQOJpWCayXz7+Og=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        var options = {
            valueNames: ['image', 'task', 'name'],
            page: 50,
            pagination: true
        };

        var userList = new List('images', options);
    </script>
@endsection