@extends('master.master_portal')

@section('title', 'RDPC - Cotisations')

@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, .form-select {
        border-radius:11px; padding:.65rem .8rem; border:1.5px solid #e5e7eb; font-size:.9rem;
    }
    .form-control:focus, .form-select:focus {
        border-color:var(--rdpc-blue); box-shadow:0 0 0 3px rgba(32,80,127,.15);
    }
    .member-found {
        display:none; 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;
    }
    .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; }
    .ui-autocomplete { z-index: 2000; border-radius:10px; padding:4px; }
</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-money-bill-wave me-1"></i> Enregistrer une cotisation</h1>
    </div>

    <form id="form_contribution">
        @csrf
        <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" required>
            <input type="hidden" name="member" id="member_id">
            <div class="member-found" id="member_found"><i class="fa-solid fa-circle-check me-1"></i> <span></span></div>
        </div>

        <div class="card-section">
            <h6><i class="fa-solid fa-coins"></i> Détails du versement</h6>
            <div class="row g-2">
                <div class="col-12">
                    <label class="form-label">Montant (F CFA) <span class="req-star">*</span></label>
                    <input type="number" min="1" name="montant" class="form-control" placeholder="Ex: 1000" required>
                </div>
                <div class="col-6">
                    <label class="form-label">Mode de paiement</label>
                    <select name="mode" class="form-select">
                        <option value="ESPECE">Espèce</option>
                        <option value="MOBILE MONEY">Mobile Money</option>
                        <option value="ORANGE MONEY">Orange Money</option>
                        <option value="VIREMENT">Virement</option>
                    </select>
                </div>
                <div class="col-6">
                    <label class="form-label">Date de versement</label>
                    <input type="date" name="date" class="form-control" value="{{ date('Y-m-d') }}">
                </div>
            </div>
        </div>

        <div class="px-3">
            <button type="submit" class="btn-submit-form" id="btn_submit">
                <i class="fa-solid fa-floppy-disk me-1"></i> Enregistrer la cotisation
            </button>
        </div>
    </form>
@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 () {
    $('#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();
            $('#member_search').val(parts[1] ? parts[1].trim() : parts[0]);
            $('#member_id').val(code);
            if (parts.length > 1) {
                $('#member_found').show().find('span').text('Membre sélectionné : ' + parts[1].trim() + ' (' + code + ')');
            }
            return false;
        },
    });

    $('#form_contribution').on('submit', function (e) {
        e.preventDefault();
        if (!$('#member_id').val()) {
            return Swal.fire({ icon:'warning', text:'Veuillez sélectionner un membre dans la liste.', timer:2500, showConfirmButton:false });
        }
        const $btn = $('#btn_submit');
        $btn.prop('disabled', true).html('<i class="fa-solid fa-spinner fa-spin me-1"></i> Enregistrement...');

        $.ajax({
            url: "{{ route('post.frontend.portal.contributions.add') }}",
            type: 'POST',
            data: $(this).serialize(),
            success: function (data) {
                $btn.prop('disabled', false).html('<i class="fa-solid fa-floppy-disk me-1"></i> Enregistrer la cotisation');
                if (data.code == 200) {
                    Swal.fire({ icon:'success', text:data.message, timer:2000, showConfirmButton:false })
                        .then(function () { window.location.href = "{{ route('get.frontend.portal.dashboard') }}"; });
                } else if (data.code == 205) {
                    Swal.fire({ icon:'error', html:data.errors.join('<br>'), showConfirmButton:true });
                } else {
                    Swal.fire({ icon:'error', text:data.message, timer:3500, showConfirmButton:false });
                }
            },
            error: function () {
                $btn.prop('disabled', false).html('<i class="fa-solid fa-floppy-disk me-1"></i> Enregistrer la cotisation');
                Swal.fire({ icon:'error', text:'Erreur serveur.', timer:3000, showConfirmButton:false });
            }
        });
    });
});
</script>
@endsection