@extends('layouts.base')

@section('title')
    Vérification
@endsection

@section('style')
    <!-- Selecrt css -->
    <link href="{{ asset('assets/vendor/select/select2.min.css') }}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="{{ asset('assets/vendor/fancybox/fancybox.css') }}" type="text/css">
@endsection

@section('content')
    <!-- Breadcrumb start -->
    <div class="row m-1">
        <div class="col-12 ">
            <h4 class="main-title">Vérification de la Réclamation #{{ $claim->claim_reference }}</h4>
            <ul class="app-line-breadcrumbs mb-3">
                <li class="">
                    <a class="f-s-14 f-w-500" href="{{ route('reclamation.index') }}">
                        <span>
                            <i class="ph-duotone  ph-stack f-s-16 "></i> Tableau de bord
                        </span>
                    </a>
                </li>
                {{-- <li>
                    <a class="f-s-14 f-w-500" href="{{ route('reclamation.list') }}">Toutes les Réclamations</a>
                </li> --}}
                <li class="active">
                    <a class="f-s-14 f-w-500" href="#">Vérification</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="row">

        <div class="col-md-5">
            <div class="card">
                <div class="card-body">
                    <div class="app-divider-v dashed">
                        <p class="badge bg-primary text-white">La première description du ticket</p>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="custome-wrapper">
                                <img alt="" height="150" src="{{ asset('storage/' . $claim->ticket_file_path) }}">
                                <div class="custome-wrapper-content">
                                    {{-- <h5>Custom Overlay</h5> --}}
                                    <span>Ticket</span>
                                </div>
                                <ul class="icon">
                                    <li><a class="text-outline-light h-35 w-35 d-flex-center b-r-50"
                                            href="{{ asset('storage/' . $claim->ticket_file_path) }}"
                                            data-fancybox="claim-media"><i
                                                class="ph-bold  ph-magnifying-glass-plus"></i></a>
                                    </li>
                                    {{-- <li><a class="text-outline-light h-35 w-35 d-flex-center b-r-50" href="#"><i
                                                class="ph-bold  ph-link"></i></a></li> --}}
                                </ul>

                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="custome-wrapper">
                                <img alt="" height="150" src="{{ asset('storage/' . $claim->first_description_file) }}">
                                <div class="custome-wrapper-content">
                                    <span>Description</span>
                                </div>
                                <ul class="icon">
                                    <li><a class="text-outline-light h-35 w-35 d-flex-center b-r-50"
                                            href="{{ asset('storage/' . $claim->first_description_file) }}"
                                            data-fancybox="claim-media"><i
                                                class="ph-bold  ph-magnifying-glass-plus"></i></a>
                                    </li>
                                </ul>

                            </div>
                        </div>
                    </div>
                    <h6 class="fw-bold mt-2 text-primary">Informations sur le Ticket</h6>
                    <div class="row mt-1">
                        <div class="col-md-6">
                            <p class="fw-bold">Date & heure du Jeu</p>
                            <p id="playDate">{{ ($claim->play_date)->format('d/m/Y H:i') }}</p>
                        </div>
                        <div class="col-md-6">
                            <p class="fw-bold">Date & heure d'Expiration</p>
                            <p id="expirationDate">{{ ($claim->ticket_expire_date)->format('d/m/Y H:i') }}</p>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <p class="fw-bold">Référence du ticket</p>
                            <p id="ticketReference">{{ $claim->ticket_referenceId }}</p>
                        </div>
                        <div class="col-md-6">
                            <p class="fw-bold">Prix du Ticket</p>
                            <p id="ticketNumber">{{ $claim->amount }}</p>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <p class="fw-bold">Gain</p>
                            <p id="operatorCode">{{ $claim->gain_amount ?? "N/A" }}</p>
                        </div>
                        <div class="col-md-6">
                            <p class="fw-bold">Gain disponible</p>
                            <p id="betAmount">{{ $claim->gain_disponible ? "Oui" : "Non" }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-7">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('reclamation.update') }}" method="POST" class="app-form"
                        enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="redirect_to" value="{{ url()->previous() }}">
                        <div class="app-divider-v dashed">
                            <p class="badge bg-primary text-white">Joint la deuxième description du ticket</p>
                        </div>
                        <input type="hidden" name="claim_referenceId" value="{{ encryptId($claim->id) }}">
                        <div class="form-group row ">
                            <div class="col-md-6">
                                <label for="">Date & heure du jeu<span class="text-danger">*</span></label>
                                <input type="datetime-local" id="play_date" name="play_date" value="{{ old('play_date') }}"
                                    class="form-control" required>
                                <span class="text-danger">@error('play_date'){{ $message }}@enderror</span>
                            </div>
                            <div class="col-md-6">
                                <label for="">Date d'expiration<span class="text-danger">*</span></label>
                                <input type="datetime-local" name="expire_date" value="{{ old('expire_date') }}"
                                    id="expire_date" class="form-control" required>
                                <span class="text-danger">@error('expire_date'){{ $message }}@enderror</span>
                            </div>
                        </div>
                        <div class="form-group row mt-2">
                            <div class="col-md-6">
                                <label for="amount">Prix du ticket</label>
                                <input type="number" value="{{ old('amount') }}" min="0" id="amount" name="amount"
                                    class="form-control" placeholder="25000" required>
                                <span class="text-danger">@error('amount'){{ $message }}@enderror</span>
                            </div>
                            <div class="col-md-6">
                                <label for="gain">Le Gain</label>
                                <input type="number" min="0" value="{{ old('gain') }}" id="gain" name="gain"
                                    class="form-control" placeholder="50000" required>
                                <span class="text-danger">@error('gain'){{ $message }}@enderror</span>
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-6">
                                <label for="ticket_referenceId">Reference</label>
                                <input type="text" value="{{ old('ticket_referenceId') }}" id="ticket_referenceId"
                                    name="ticket_referenceId" class="form-control" placeholder="25207133110" required>
                                <span class="text-danger">@error('ticket_referenceId'){{ $message }}@enderror</span>
                            </div>
                            <div class="col-md-6">
                                <label for="operator_code">Code opérateur</label>
                                <input type="text" value="{{ old('operator_code') }}" id="operator_code"
                                    name="operator_code" class="form-control" placeholder="25501478965" required>
                                <span class="text-danger">@error('operator_code'){{ $message }}@enderror</span>
                            </div>
                        </div>
                        <div class="row form-group mt-2">
                            <div class="col-md-12">
                                <label for="">Capture de la description</label>
                                <input type="file" id="" name="description_file" class="form-control">
                                @error('description_file')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-check d-flex mt-3">
                                    <input class="form-check-input" id="flexCheckIndeterminate" type="checkbox" checked
                                        name="gain_disponible" onchange="toggleSubmitButton()">
                                    <label class="form-check-label ms-2" for="flexCheckIndeterminate">
                                        Le gain est toujours disponible <i class="ph-light ph-question text-muted"></i>
                                    </label>
                                </div>
                                @error('gain_disponible')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-12 d-flex justify-content-end gap-2">
                                <a href="#" class="btn btn-sm btn-outline-danger d-none"
                                    data-bs-target="#exampleModalDefault" data-bs-toggle="modal" id="modalBtn"> <i
                                        class="ph-light ph-x"></i> Rejeter</a>
                                <button type="submit" id="submitBtn" class="btn btn-sm btn-outline-primary"> <i
                                        class="ph-light ph-paper-plane"></i> À Transmettre</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div aria-hidden="true" aria-labelledby="exampleModalDefault" class="modal fade" id="exampleModalDefault" tabindex="-1">
        <div class="modal-dialog app_modal_md">
            <div class="modal-content">
                <div class="modal-header bg-danger-800">
                    <h1 class="modal-title fs-5 text-white" id="exampleModalDefault13">Rejet de la réclamation</h1>
                    <button aria-label="Close" class="fs-5 border-0 bg-none text-white" data-bs-dismiss="modal"
                        type="button"><i class="ph-light ph-x-circle fs-3"></i></button>
                </div>
                <form class="app-form" action="{{ route('reclamation.reject') }}" method="POST">
                    @csrf
                    <input type="hidden" name="redirect_to" value="{{ url()->previous() }}">
                    <div class="modal-body">
                        <input type="hidden" name="claim_reference" value="{{ $claim->claim_reference }}">
                        <p>Êtes-vous sûr de vouloir rejeter cette réclamation ?</p>
                        <textarea name="reason" id="rejection_reason" class="form-control" rows="3"
                            placeholder="Motif du rejet"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-light-danger" type="submit" id="jrSubmitBtn"><i class="ph-light ph-x"></i>
                            &nbsp; Confirmer rejet</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <!-- select2 -->
    <script src="{{ asset('assets/vendor/select/select2.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/fancybox/fancybox.umd.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Initialisation de Fancybox
            Fancybox.bind('[data-fancybox]', {
                // Options de configuration
                Thumbs: {
                    autoStart: true,
                },
                Toolbar: {
                    display: {
                        left: ["infobar"],
                        middle: [
                            "zoomIn",
                            "zoomOut",
                            "toggle1to1",
                            "rotateCCW",
                            "rotateCW",
                            "flipX",
                            "flipY",
                        ],
                        right: ["slideshow", "thumbs", "close"],
                    },
                },
            });
        });
    </script>
    <script>
        function toggleSubmitButton() {
            const checkbox = document.getElementById('flexCheckIndeterminate');
            const submitBtn = document.getElementById('submitBtn');
            const modalBtn = document.getElementById('modalBtn');
            if (checkbox.checked) {
                submitBtn.classList.remove('d-none');
                modalBtn.classList.add('d-none');
            } else {
                submitBtn.classList.add('d-none');
                modalBtn.classList.remove('d-none');
            }
        }
    </script>
@endsection