@extends('master.master_portal')

@section('title', 'RDPC - Générer une carte')

@section('style')
<style>
    body { background:#eef0f9; margin:0; padding-bottom:6rem; }
    .topbar {
        background: var(--rdpc-blue-dark); color:#fff;
        padding: 1rem 1.2rem; display:flex; align-items:center; gap:.8rem;
        border-radius: 0 0 22px 22px; position:sticky; top:0; z-index:10;
    }
    .topbar a.back { color:#fff; font-size:1.2rem; text-decoration:none; }
    .topbar h1 { font-size:1.05rem; font-weight:700; margin:0; }
    .card-section {
        background:#fff; border-radius:16px; margin:1rem; padding:1.1rem 1rem;
        box-shadow:0 4px 15px rgba(0,0,0,.05);
    }
    .card-section h6 {
        font-size:.85rem; font-weight:700; color:var(--rdpc-blue-dark);
        margin-bottom:.9rem; text-transform:uppercase; letter-spacing:.4px;
        display:flex; align-items:center; gap:.5rem;
    }
    .form-label { font-weight:600; font-size:.8rem; color:#444; margin-bottom:.25rem; }
    .req-star { color:#d0021b; }
    .form-control { border-radius:11px; padding:.65rem .8rem; border:1.5px solid #e5e7eb; font-size:.9rem; }
    .form-control:focus { border-color:var(--rdpc-blue); box-shadow:0 0 0 3px rgba(32,80,127,.15); }
    .member-found {
        margin-top:.6rem; padding:.7rem .9rem; border-radius:11px;
        background: var(--rdpc-blue-soft); color: var(--rdpc-blue-dark); font-weight:600; font-size:.85rem;
    }
    .ui-autocomplete { z-index: 2000; border-radius:10px; padding:4px; }

    /* Types de carte — sélection unique */
    .card-types-hint { font-size:.78rem; color:#8a96a5; margin-bottom:.9rem; }
    .card-type {
        position: relative; display:flex; flex-direction:column; align-items:center; gap:8px;
        padding:14px 8px; margin:0; border:2px solid #e4e8ee; border-radius:14px;
        cursor:pointer; background:#fff; transition:border-color .18s ease, box-shadow .18s ease;
    }
    .card-type:hover { border-color:#c3ccd6; }
    .card-type__cb { position:absolute; opacity:0; pointer-events:none; }
    .card-type__swatch { width:64px; height:40px; 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:12.5px; color:#37414b; letter-spacing:.02em; }
    .card-type__check {
        position:absolute; top:6px; right:6px; width:20px; height:20px; border-radius:50%;
        display:flex; align-items:center; justify-content:center; background:#eef1f5; color:#fff; font-size:13px;
        transition:background .18s ease, transform .18s ease; transform:scale(.6);
    }
    .card-type__cb:checked ~ .card-type__check { background:var(--rdpc-blue-dark); transform:scale(1); }
    .card-type__cb:checked ~ .card-type__label { color:var(--rdpc-blue-dark); }
    .card-type:has(.card-type__cb:checked) { border-color:var(--rdpc-blue-dark); box-shadow:0 8px 20px -10px rgba(32,80,127,.5); }

    .btn-submit-form {
        background:var(--rdpc-blue-dark); border:none; color:#fff; width:100%;
        border-radius:13px; padding:.9rem; font-weight:700; font-size:.95rem;
    }
    .btn-submit-form:hover { background:#1a4269; color:#fff; }
    .btn-submit-form:disabled { opacity:.5; }
</style>
@endsection

@section('content')
    <div class="topbar">
        <a href="{{ route('get.frontend.portal.dashboard') }}" class="back"><i class="fa-solid fa-arrow-left"></i></a>
        <h1><i class="fa-solid fa-id-card me-1"></i> Générer une carte</h1>
    </div>

    <div class="card-section">
        <h6><i class="fa-solid fa-user"></i> Membre</h6>
        <label class="form-label">Id ou Nom du membre <span class="req-star">*</span></label>
        <input type="text" class="form-control" id="member_search" placeholder="214515 ou MBA" autocomplete="off">
        <input type="hidden" id="member_code">
        <div class="member-found" id="member_found" style="display:none;"><i class="fa-solid fa-circle-check me-1"></i> <span></span></div>
    </div>

    <div class="card-section">
        <h6><i class="fa-solid fa-palette"></i> Type de carte</h6>
        <p class="card-types-hint">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-2">
            @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="fa-solid fa-check"></i></span>
                </label>
            </div>
            @endforeach
        </div>
    </div>

    <div class="px-3">
        <button type="button" class="btn-submit-form" id="btn_generate" disabled>
            <i class="fa-solid fa-id-card me-1"></i> Générer la carte
        </button>
    </div>
@endsection

@section('meta')
<link rel="stylesheet" href="{{ asset('css/jquery-ui.min.css') }}">
@endsection

@section('scripts')
<script src="{{ asset('js/jquery-ui.min.js') }}"></script>
<script>
$(function () {
    /* ---------- Sélection unique du type de carte ---------- */
    $(document).on('change', "input[name='card_type']", function () {
        if (this.checked) {
            $("input[name='card_type']").not(this).prop('checked', false);
        }
    });

    /* ---------- Recherche du membre ---------- */
    $('#member_search').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "{{ route('get.backend.list.all.members') }}",
                type: 'GET', dataType: 'json',
                data: { value: request.term },
                success: function (data) { response(data); },
            });
        },
        select: function (event, ui) {
            const parts = ui.item.label.split('/');
            const code = parts[0].trim();
            const name = parts[1] ? parts[1].trim() : parts[0];
            $('#member_search').val(name);
            $('#member_code').val(code);
            $('#member_found').show().find('span').text('Membre sélectionné : ' + name + ' (' + code + ')');
            $('#btn_generate').prop('disabled', false);
            return false;
        },
    });

    $('#member_search').on('input', function () {
        $('#member_code').val('');
        $('#btn_generate').prop('disabled', true);
    });

    /* ---------- Génération ---------- */
    $('#btn_generate').on('click', function () {
        const code = $('#member_code').val();
        if (!code) {
            return Swal.fire({ icon:'warning', text:'Veuillez sélectionner un membre dans la liste.', timer:2500, showConfirmButton:false });
        }
        const type = $("input[name='card_type']:checked").val();
        let url = "{{ route('get.backend.card.member', 'mat') }}".replace('mat', code);
        if (type) url += '?type=' + encodeURIComponent(type);
        window.open(url, '_blank');

        Swal.fire({ toast:true, position:'top', icon:'success', title:'Carte générée', showConfirmButton:false, timer:1800, timerProgressBar:true });
    });
});
</script>
@endsection