@extends('admin_dashboard')
@section('admin')

<style>
    /* ── Page Header ─────────────────────────────────────── */
    .sl-header {
        background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
        border-radius: 12px;
        padding: 20px 24px;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 4px 15px rgba(37,99,235,0.25);
    }
    .sl-header h4 {
        color: #fff;
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
    }
    .sl-header h4 i { margin-right: 8px; opacity: 0.85; }

    .btn-view-all {
        background: #fff;
        color: #1e40af;
        border: none;
        border-radius: 8px;
        padding: 8px 18px;
        font-weight: 600;
        font-size: 0.88rem;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        transition: all 0.2s;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }
    .btn-view-all:hover {
        background: #eff6ff;
        color: #1d4ed8;
        transform: translateY(-1px);
    }

    /* ── Action Card ─────────────────────────────────────── */
    .action-card {
        background: #fff;
        border-radius: 12px;
        border: none;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        padding: 32px 28px;
        text-align: center;
    }
    .action-card .action-label {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: #64748b;
        margin-bottom: 16px;
    }
    .action-card .action-label i { margin-right: 5px; }
    .action-buttons {
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
    }
    .btn-action {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 9px;
        padding: 11px 22px;
        font-weight: 600;
        font-size: 0.9rem;
        border: none;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .btn-action:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.15); }
    .btn-action-bank   { background: linear-gradient(135deg,#0ea5e9,#0284c7); color:#fff; }
    .btn-action-other  { background: linear-gradient(135deg,#f59e0b,#d97706); color:#fff; }

    /* ── Modal shared ────────────────────────────────────── */
    .modal-content {
        border: none;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    }
    .modal-hdr {
        padding: 18px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .modal-hdr h5 { color:#fff; margin:0; font-size:1.05rem; font-weight:600; }
    .modal-hdr-blue   { background: linear-gradient(135deg,#1e293b,#334155); }
    .modal-hdr-bank   { background: linear-gradient(135deg,#0369a1,#0ea5e9); }
    .modal-hdr-gss    { background: linear-gradient(135deg,#065f46,#059669); }

    .modal-body { padding: 24px; }

    .form-label {
        font-size: 0.8rem;
        font-weight: 700;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin-bottom: 5px;
    }
    .form-control, .form-select {
        border: 1.5px solid #e2e8f0;
        border-radius: 8px;
        font-size: 0.92rem;
        padding: 9px 12px;
        color: #1e293b;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .form-control:focus, .form-select:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
        outline: none;
    }
    .section-title {
        font-size: 0.82rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #059669;
        border-bottom: 2px solid #d1fae5;
        padding-bottom: 6px;
        margin: 20px 0 14px;
    }
    .section-title i { margin-right: 6px; }
    .btn-modal-submit {
        width: 100%;
        border: none;
        border-radius: 8px;
        padding: 11px;
        font-weight: 600;
        font-size: 0.93rem;
        color: #fff;
        transition: opacity 0.2s, transform 0.15s;
        margin-top: 8px;
    }
    .btn-modal-submit:hover { opacity: 0.9; transform: translateY(-1px); }
    .btn-submit-blue  { background: linear-gradient(135deg,#1e40af,#2563eb); }
    .btn-submit-sky   { background: linear-gradient(135deg,#0369a1,#0ea5e9); }
    .btn-submit-green { background: linear-gradient(135deg,#065f46,#059669); }
</style>

<div class="content">
    <div class="container-fluid">

        {{-- Page Header --}}
        <div class="sl-header">
            <h4><i class="fa fa-layer-group"></i> Add Sub-Ledger</h4>
            <a href="{{ route('all.subledger') }}" class="btn-view-all">
                <i class="fa fa-list"></i> All Sub-Ledgers
            </a>
        </div>

        {{-- Action Card --}}
        <div class="row justify-content-center">
            <div class="col-lg-8 col-xl-6">
                <div class="action-card">
                    <div class="action-label"><i class="fa fa-hand-pointer"></i> Select a Ledger Type to Add</div>
                    <div class="action-buttons">
                        <button type="button" class="btn-action btn-action-bank"
                            data-bs-toggle="modal" data-bs-target="#bank-modal">
                            <i class="fa fa-university"></i> Bank Account
                        </button>
                        <button type="button" class="btn-action btn-action-other"
                            data-bs-toggle="modal" data-bs-target="#signup-modal">
                            <i class="fa fa-folder-plus"></i> Other Ledger
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


{{-- ══════════════════════════════════════════════════
     Other Sub-Ledger Modal
══════════════════════════════════════════════════ --}}
<div id="signup-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-hdr modal-hdr-blue">
                <h5><i class="fa fa-folder-plus me-2"></i>Add New Sub-Ledger</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                @if(session('success'))
                    <div class="alert alert-success py-2 mb-3">{{ session('success') }}</div>
                @endif
                <form action="{{ route('subledger.store') }}" method="POST">
                    @csrf
                    <input id="ledger_id" name="ledger_id" value="0" hidden>

                    <div class="row g-3">
                        <div class="col-12">
                            <label for="ledger_name" class="form-label">Ledger Name</label>
                            <input list="ledger_names" id="ledger_name" name="ledger_name" class="form-control" placeholder="Type or select ledger…">
                            <datalist id="ledger_names">
                                @foreach($ledgers as $ledger)
                                    <option value="{{ $ledger->ledger_name }}">
                                @endforeach
                            </datalist>
                        </div>
                        <div class="col-12">
                            <label for="subledger_name" class="form-label">Sub-Ledger Name</label>
                            <input class="form-control" type="text" name="subledger_name" id="subledger_name" placeholder="e.g. Petty Cash">
                        </div>
                        <div class="col-6">
                            <label for="op_bal" class="form-label">Opening Balance</label>
                            <input class="form-control" type="number" name="op_bal" id="op_bal" value="0" step="0.01">
                        </div>
                        <div class="col-6">
                            <label for="cur_bal" class="form-label">Current Balance</label>
                            <input class="form-control" type="number" name="cur_bal" id="cur_bal" value="0" step="0.01">
                        </div>
                        <div class="col-12">
                            <button class="btn-modal-submit btn-submit-blue" type="submit">
                                <i class="fa fa-save me-2"></i>Save Sub-Ledger
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


{{-- ══════════════════════════════════════════════════
     Bank Account Modal
══════════════════════════════════════════════════ --}}
<div id="bank-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-hdr modal-hdr-bank">
                <h5><i class="fa fa-university me-2"></i>Add New Bank Account</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                @if(session('success'))
                    <div class="alert alert-success py-2 mb-3">{{ session('success') }}</div>
                @endif
                <form method="post" action="{{ route('bank.info.store') }}">
                    @csrf
                    <div class="row g-3">
                        <div class="col-6">
                            <label class="form-label">Bank Name</label>
                            <input class="form-control" type="text" name="bank_name" id="bank_name" placeholder="e.g. Sonali Bank">
                        </div>
                        <div class="col-6">
                            <label class="form-label">Branch Name</label>
                            <input class="form-control" type="text" name="branch_name" placeholder="e.g. Dhaka Main">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Account Type</label>
                            <select name="account_type" id="account_type" class="form-control">
                                <option value="">— Select Account Type —</option>
                                <option value="Current">Current Account</option>
                                <option value="Savings">Savings Account</option>
                                <option value="Loan">Loan Account</option>
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label">Account Name</label>
                            <input class="form-control" type="text" name="account_name" placeholder="Account holder name">
                        </div>
                        <div class="col-6">
                            <label class="form-label">Account Number</label>
                            <input class="form-control" type="number" name="account_number" placeholder="e.g. 1234567890">
                        </div>
                        <div class="col-12">
                            <button class="btn-modal-submit btn-submit-sky" type="submit">
                                <i class="fa fa-save me-2"></i>Save Bank Account
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


{{-- ══════════════════════════════════════════════════
     GSS Member Modal (hidden, kept for route compatibility)
══════════════════════════════════════════════════ --}}
<div id="gss-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-hdr modal-hdr-gss">
                <h5><i class="fa fa-user-plus me-2"></i>Add New GSS Member</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                @if(session('success'))
                    <div class="alert alert-success py-2 mb-3">{{ session('success') }}</div>
                @endif
                <form action="{{ route('member.info.store') }}" method="POST">
                    @csrf

                    <p class="section-title"><i class="bi bi-credit-card-2-front"></i> Account Information</p>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Account Number</label>
                            <input type="text" name="account_number" class="form-control" readonly>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Opening Date</label>
                            <input type="date" name="opening_date" value="{{ date('Y-m-d') }}" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">A/C Holder Name</label>
                            <input type="text" name="member_name" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">PID Name</label>
                            <input type="text" name="pid_name" class="form-control">
                        </div>
                    </div>

                    <p class="section-title"><i class="bi bi-person-lines-fill"></i> Personal Information</p>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Father / Husband's Name</label>
                            <input type="text" name="fat_hus_name" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Mother's Name</label>
                            <input type="text" name="mother_name" class="form-control">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Address</label>
                            <textarea name="member_address" class="form-control" rows="2"></textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Date of Birth</label>
                            <input type="date" name="member_dob" value="{{ date('Y-m-d') }}" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">NID Number</label>
                            <input type="text" name="member_nid" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Occupation</label>
                            <input type="text" name="member_occupation" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Mobile Number</label>
                            <input type="text" name="member_mobile" class="form-control">
                        </div>
                    </div>

                    <p class="section-title"><i class="bi bi-person-heart"></i> Nominee Information</p>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Nominee Name</label>
                            <input type="text" name="nominee_name" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Father / Husband's Name</label>
                            <input type="text" name="nominee_fat_hus_name" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Mother's Name</label>
                            <input type="text" name="nominee_mother_name" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Address</label>
                            <input type="text" name="nominee_address" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Birth Date</label>
                            <input type="date" name="nominee_dob" value="{{ date('Y-m-d') }}" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Relation</label>
                            <input type="text" name="nominee_relation" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Mobile Number</label>
                            <input type="text" name="nominee_mobile" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Share (%)</label>
                            <input type="number" name="nominee_percent" class="form-control">
                        </div>
                        <div class="col-12">
                            <button class="btn-modal-submit btn-submit-green" type="submit">
                                <i class="fa fa-save me-2"></i>Save GSS Member
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    $('#head_id').change(function () {
        var head_id = $(this).val();
        $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });
        $.ajax({
            type: 'POST',
            url: '/getLedger',
            data: { 'head_id': head_id },
            success: function (data) { $('#ledger_id').html(data); }
        });
    });

    function ceo_photo_image(input) {
        if (input.files && input.files[0]) {
            document.getElementById('ceo_photo_blah').src = window.URL.createObjectURL(input.files[0]);
        }
    }
</script>
@endsection