@extends('master.master_back')
@section('title')
    RDPC - Générer une carte
@endsection

@section('content')
<div class="page-content">
    <!--breadcrumb-->
    <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
        <div class="breadcrumb-title pe-3">Generation des cartes</div>
        <div class="ps-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 p-0">
                    <li class="breadcrumb-item"><a href="{{ route('get.backend.dashboard') }}">Dashboard</a>
                    </li>
                    <li class="breadcrumb-item"><a href="{{ route('get.backend.list.admin') }}">Liste des cartes</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Générer une carte</li>
                </ol>
            </nav>
        </div>
    </div>
    <!--end breadcrumb-->
    <div class="card card-bx mb-3">
        <div class="card-header mt-4">
            <h6 class="title">INFORMATIONS</h6>
        </div>
        <form class="profile-form" id="search_user" onsubmit="return false">
            <div class="card-body">
                <div class="row">
                    {{-- 1. Sélection du membre --}}
                    <div class="col-sm-12 mb-3">
                        <label class="form-label">Id ou Nom du Membre</label>
                        <input type="text" class="form-control" tabindex="-1" name="member" id="member" placeholder="214515 ou MBA" autocomplete="off">
                        <input type="hidden" class="form-control" id="number_input" name="id">
                    </div>

                    {{-- 2. Choix du type de carte --}}
                    <div class="col-sm-12 mb-2">
                        <label class="form-label">Type de carte à générer</label>
                        <p class="text-muted small mb-3">Cochez le type de carte souhaité (un seul). Si vous n'en cochez aucun, le type est choisi automatiquement selon le profil du membre.</p>
                        <div class="row g-3 card-types">
                            @php
                                $types = [
                                    ['value' => 'sylver', 'label' => 'Silver', 'grad' => 'linear-gradient(135deg,#c7cfd6,#8a949d)'],
                                    ['value' => 'red',    'label' => 'Red',    'grad' => 'linear-gradient(135deg,#e2394d,#b00016)'],
                                    ['value' => 'gold',   'label' => 'Gold',   'grad' => 'linear-gradient(135deg,#f4cb45,#d19700)'],
                                    ['value' => 'yellow', 'label' => 'Yellow', 'grad' => 'linear-gradient(135deg,#f7e04a,#d9b400)'],
                                ];
                            @endphp
                            @foreach ($types as $t)
                            <div class="col-6 col-md-3">
                                <label class="card-type" for="type_{{ $t['value'] }}">
                                    <input type="checkbox" class="card-type__cb" id="type_{{ $t['value'] }}" name="card_type[]" value="{{ $t['value'] }}">
                                    <span class="card-type__swatch" style="background: {{ $t['grad'] }}"></span>
                                    <span class="card-type__label">{{ $t['label'] }}</span>
                                    <span class="card-type__check"><i class="bx bx-check"></i></span>
                                </label>
                            </div>
                            @endforeach
                        </div>
                    </div>

                    {{-- 3. Bouton --}}
                    <div class="col-sm-12 mt-3">
                        <button type="submit" onclick="readUrlFile()" class="btn btn-primary px-4 d-none" id="btn_check_member">
                            <i class="bx bxs-id-card me-1"></i> Générer la carte
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@section('styles')
<style>
    .card-type{
        position: relative;
        display: flex; flex-direction: column; align-items: center; gap: 8px;
        padding: 16px 10px; margin: 0;
        border: 2px solid #e4e8ee; border-radius: 14px;
        cursor: pointer; background: #fff;
        transition: border-color .18s ease, box-shadow .18s ease, transform .1s ease;
        user-select: none;
    }
    .card-type:hover{ border-color: #c3ccd6; box-shadow: 0 6px 18px -10px rgba(0,0,0,.25); }
    .card-type__cb{ position: absolute; opacity: 0; pointer-events: none; }
    .card-type__swatch{
        width: 72px; height: 46px; border-radius: 8px;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 4px 10px -4px rgba(0,0,0,.35);
    }
    .card-type__label{ font-weight: 700; font-size: 14px; color: #37414b; letter-spacing: .02em; }
    .card-type__check{
        position: absolute; top: 8px; right: 8px;
        width: 22px; height: 22px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: #eef1f5; color: #fff; font-size: 15px;
        transition: background .18s ease, transform .18s ease; transform: scale(.6);
    }
    /* état coché */
    .card-type__cb:checked ~ .card-type__check{ background: #0d6efd; transform: scale(1); }
    .card-type__cb:checked ~ .card-type__label{ color: #0d6efd; }
    .card-type:has(.card-type__cb:checked){ border-color: #0d6efd; box-shadow: 0 8px 20px -10px rgba(13,110,253,.5); }
</style>
@endsection

@section('scripts')
<link rel="stylesheet" href="{{ asset('css/jquery-ui.min.css') }}">
<script src="{{ asset('js/jquery-ui.min.js') }}"></script>
<script>
    $(document).ready(function () {
        // Sélection unique : cocher une carte décoche les autres
        $(document).on('change', "input[name='card_type[]']", function () {
            if (this.checked) {
                $("input[name='card_type[]']").not(this).prop('checked', false);
            }
        });

        var path = "{{ route('get.backend.list.all.members') }}";
        $("#member").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: path,
                    type: "GET",
                    dataType: "json",
                    data: { value : request.term },
                    success: function (data) { response(data); },
                });
            },
            select: function (event, ui) {
                var content = ui.item.label;
                content = content.split("/");
                $("#member").val(content[1]);
                $("#number_input").val(content[0]);
                if (content != "AUCUN UTILISATEUR TROUVE") {
                    $("#btn_check_member").addClass("d-block").removeClass("d-none");
                }
                return false;
            },
        });
    });

    function readUrlFile() {
        let user_id = $("#number_input").val();
        if (!user_id) { alert("Veuillez d'abord sélectionner un membre."); return; }
        user_id = user_id.replace(/\s/g, '');

        // types cochés
        let types = $("input[name='card_type[]']:checked").map(function () { return this.value; }).get();

        let base = "{{ route('get.backend.card.member', 'mat') }}".replace('mat', user_id);

        if (types.length === 0) {
            // aucun type coché -> logique automatique
            window.open(base, "_blank");
        } else {
            // un onglet par type coché
            types.forEach(function (t) {
                window.open(base + "?type=" + encodeURIComponent(t), "_blank");
            });
        }

        // reset
        $("#member").val('');
        $("#number_input").val('');
        $("input[name='card_type[]']").prop('checked', false);
        $("#btn_check_member").addClass("d-none").removeClass("d-block");
    }
</script>
@endsection