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

<style>
    tbody, td, tfoot, th, thead, tr {
        border-width: 1px;
    }
    .ledger-header {
        background: linear-gradient(135deg, #0f766e 0%, #0d9488 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(15,118,110,0.25);
    }
    .ledger-header h4 {
        color: #fff;
        margin: 0;
        font-size: 1.3rem;
        font-weight: 600;
        letter-spacing: 0.3px;
    }
    .ledger-header h4 i {
        margin-right: 8px;
        opacity: 0.85;
    }
    .btn-add-ledger {
        background: #fff;
        color: #0f766e;
        border: none;
        border-radius: 8px;
        padding: 8px 18px;
        font-weight: 600;
        font-size: 0.88rem;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }
    .btn-add-ledger:hover {
        background: #f0fdfa;
        color: #0d9488;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    .card-body {
        padding: 0;
    }
    #basic-datatable thead th {
        background: #f8fafc;
        color: #374151;
        font-weight: 600;
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 14px 16px;
        border-bottom: 2px solid #e2e8f0;
    }
    #basic-datatable tbody td {
        padding: 13px 16px;
        font-size: 0.92rem;
        color: #374151;
        vertical-align: middle;
        border-bottom: 1px solid #f1f5f9;
    }
    #basic-datatable tbody tr:last-child td {
        border-bottom: none;
    }
    #basic-datatable tbody tr:hover {
        background: #f0fdfa;
    }
    .badge-group {
        background: #e0f2fe;
        color: #0369a1;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 500;
    }
    .btn-edit-ledger {
        background: #eff6ff;
        color: #2563eb;
        border: 1px solid #bfdbfe;
        border-radius: 7px;
        padding: 5px 12px;
        font-size: 0.82rem;
        transition: all 0.2s;
    }
    .btn-edit-ledger:hover {
        background: #2563eb;
        color: #fff;
        border-color: #2563eb;
    }

    /* Modal styles */
    .modal-content {
        border-radius: 14px;
        border: none;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    }
    .modal-header-custom {
        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        padding: 18px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .modal-header-custom h5 {
        color: #fff;
        margin: 0;
        font-size: 1.05rem;
        font-weight: 600;
    }
    .modal-body {
        padding: 0;
    }
    .modal-form-section {
        padding: 24px 24px 8px;
    }
    .form-label {
        font-size: 0.83rem;
        font-weight: 600;
        color: #475569;
        margin-bottom: 5px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }
    .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: #0d9488;
        box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
        outline: none;
    }
    .btn-submit-ledger {
        background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 10px 28px;
        font-weight: 600;
        font-size: 0.92rem;
        width: 100%;
        transition: opacity 0.2s, transform 0.15s;
    }
    .btn-submit-ledger:hover {
        opacity: 0.92;
        transform: translateY(-1px);
    }
    .group-reference {
        background: #f8fafc;
        border-top: 1px solid #e2e8f0;
        padding: 20px 24px 24px;
    }
    .group-reference h6 {
        color: #374151;
        font-weight: 700;
        margin-bottom: 14px;
        font-size: 0.88rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .group-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .group-list li {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 8px 12px;
        font-size: 0.82rem;
    }
    .group-list li strong {
        color: #0f766e;
        display: block;
        margin-bottom: 2px;
        font-size: 0.83rem;
    }
    .group-list li em {
        color: #6b7280;
        font-style: normal;
        font-size: 0.78rem;
    }
</style>

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

        {{-- Page Header --}}
        <div class="ledger-header">
            <h4><i class="fa fa-book-open"></i> All Ledgers</h4>
            <button type="button" class="btn-add-ledger" data-bs-toggle="modal" data-bs-target="#signup-modal">
                <i class="fa fa-plus"></i> Add Ledger
            </button>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
                <i class="fa fa-check-circle me-2"></i>{{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        {{-- Table Card --}}
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <table id="basic-datatable" class="table dt-responsive w-100">
                            <thead>
                                <tr>
                                    <th style="width:60px">#</th>
                                    <th>Ledger Name</th>
                                    <th>Group</th>
                                    <th style="width:90px">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($ledgers as $key => $item)
                                <tr>
                                    <td><span class="text-muted">{{ $key + 1 }}</span></td>
                                    <td><strong>{{ $item->ledger_name }}</strong></td>
                                    <td><span class="badge-group">{{ $item->acc_head->head_name }}</span></td>
                                    <td>
                                        <a href="{{ route('edit.ledger', $item->id) }}" class="btn-edit-ledger">
                                            <i class="fas fa-edit me-1"></i> Edit
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


{{-- Add 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-header-custom">
                <h5><i class="fa fa-plus-circle me-2"></i>Add New Ledger</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <form method="post" action="{{ route('ledger.store') }}">
                    @csrf

                    <div class="modal-form-section">
                        @if(session('success'))
                            <div class="alert alert-success py-2">{{ session('success') }}</div>
                        @endif

                        <div class="mb-3">
                            <label for="head_id" class="form-label">Group Name</label>
                            <select name="head_id" id="head_id" class="form-control">
                                <option value="">— Select Group —</option>
                                @foreach ($heads as $head)
                                    <option value="{{ $head->id }}">{{ $head->head_name }}</option>
                                @endforeach
                            </select>
                            @error('head_id')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="ledger_name" class="form-label">Ledger Name</label>
                            <input class="form-control" type="text" name="ledger_name" id="ledger_name" placeholder="e.g. Cash in Hand">
                            @error('ledger_name')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="ledger_type" class="form-label">Ledger Type</label>
                            <select name="ledger_type" id="ledger_type" class="form-control">
                                <option value="">— Select Type —</option>
                                <option value="D">D &mdash; Debit</option>
                                <option value="C">C &mdash; Credit</option>
                            </select>
                            @error('ledger_type')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-6 mb-3">
                                <label for="op_bal" class="form-label">Opening Balance</label>
                                <input class="form-control" type="number" name="op_bal" placeholder="0.00" value="0" step="0.01">
                            </div>
                            <div class="col-6 mb-3">
                                <label for="cur_bal" class="form-label">Closing Balance</label>
                                <input class="form-control" type="number" name="cur_bal" placeholder="0.00" value="0" step="0.01">
                            </div>
                        </div>

                        <div class="mb-4">
                            <button class="btn-submit-ledger" type="submit">
                                <i class="fa fa-save me-2"></i>Save Ledger
                            </button>
                        </div>
                    </div>
                </form>

                {{-- Group Reference --}}
                <div class="group-reference">
                    <h6><i class="fa fa-info-circle me-1"></i> Group Reference</h6>
                    <ul class="group-list">
                        <li><strong>Capital Account</strong><em>Owner's Capital, Partner's Capital</em></li>
                        <li><strong>Reserves &amp; Surplus</strong><em>General Reserve, Retained Earnings</em></li>
                        <li><strong>Loans (Liability)</strong><em>Bank Loan, Loan from Partner</em></li>
                        <li><strong>Current Liabilities</strong><em>Creditors, Outstanding Expenses</em></li>
                        <li><strong>Fixed Assets</strong><em>Building, Machinery, Furniture</em></li>
                        <li><strong>Investments</strong><em>Shares, Mutual Funds, FDs</em></li>
                        <li><strong>Current Assets</strong><em>Cash, Bank, Debtors, Stock</em></li>
                        <li><strong>Indirect Expenses</strong><em>Rent, Salary, Electricity</em></li>
                        <li><strong>Direct Expenses</strong><em>Purchase, Wages, Carriage</em></li>
                        <li><strong>Direct Income</strong><em>Sales, Service Income</em></li>
                        <li><strong>Indirect Income</strong><em>Interest, Commission Received</em></li>
                        <li><strong>Suspense Account</strong><em>Temporary unidentified entries</em></li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        $('#signup-modal').on('shown.bs.modal', function () {
            $('#head_id').focus();
        });

        $('#head_id').keypress(function (e) {
            if (e.which === 13) {
                e.preventDefault();
                $('#ledger_name').focus().select();
            }
        });
    });
</script>

@endsection