<div>
    <!-- Header -->
    <div class="row align-items-center mb-4">
        <div class="col-md-6">
            <h1 class="h3 font-weight-bold text-dark">Manage Tranches</h1>
        </div>
        <div class="col-md-6 text-md-right">
            <div class="d-flex justify-content-md-end align-items-center">
                <input wire:model.live="search" type="text" placeholder="Search tranches..."
                       class="form-control mr-2" style="max-width: 250px;">
                @can('tranches.create')
                    <button wire:click="openModal" class="btn btn-primary shadow-sm">
                        <i class="fa fa-plus mr-1"></i> New Tranche
                    </button>
                @endcan
            </div>
        </div>
    </div>

    @if (session()->has('message'))
        <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
            {{ session('message') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <!-- Table Card -->
    <div class="card shadow-sm border-0 rounded-lg overflow-hidden">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover mb-0 table-striped">
                    <thead class="bg-light text-secondary text-uppercase"
                           style="font-size: 0.75rem; letter-spacing: 0.05em;">
                    <tr>
                        <th class="px-4 border-top-0">Funder</th>
                        <th class="px-4 border-top-0">Tranche Name</th>
                        <th class="px-4 border-top-0">Funded Date</th>
                        <th class="px-4 border-top-0">Rate per Case</th>
                        <th class="px-4 border-top-0">Created</th>
                        <th class="px-4 border-top-0 text-right">Actions</th>
                    </tr>
                    </thead>
                    <tbody class="bg-white">
                    @forelse($tranches as $tranche)
                        <tr>
                            <td class="px-4 align-middle font-weight-bold">{{ $tranche->funder_name }}</td>
                            <td class="px-4 align-middle">{{ $tranche->tranche_name }}</td>
                            <td class="px-4 align-middle">{{ $tranche->funded_date?->format('d/m/Y') }}</td>
                            <td class="px-4 align-middle font-weight-bold text-dark">
                                £{{ number_format($tranche->amount_per_case, 2) }}</td>
                            <td class="px-4 align-middle text-muted">{{ $tranche->created_at->format('d/m/Y') }}</td>
                            <td class="px-4 align-middle text-right">
                                @can('tranches.edit')
                                    <button wire:click="edit({{ $tranche->id }})" class="btn btn-md text-primary mr-3">
                                        <i class="mdi mdi-pencil text-primary"></i>
                                    </button>
                                @endcan
                                @can('tranches.delete')
                                    <button wire:click="confirmDelete({{ $tranche->id }})"
                                            class="btn btn-md text-danger">
                                        <i class="mdi mdi-trash-can text-danger"></i>
                                    </button>
                                @endcan
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-4 py-5 text-center text-muted font-italic">No tranches found.</td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer bg-light border-0">
            <div class="d-flex justify-content-center">
                {{ $tranches->links() }}
            </div>
        </div>
    </div>

    <!-- Create/Edit Modal -->
    @if($isModalOpen)
        <div class="modal fade show d-block" tabindex="-1" style="--bs-offcanvas-width: 600px;" role="dialog"
             style="background: rgba(0,0,0,0.5);">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content border-0 shadow-lg">
                    <div class="modal-header border-bottom-0">
                        <h5 class="modal-title font-weight-bold">{{ $trancheId ? 'Edit Tranche' : 'Create New Tranche' }}</h5>
                        <button type="button" class="close" wire:click="closeModal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group mb-3">
                            <label class="small font-weight-bold text-uppercase text-muted">Funder Name</label>
                            <input wire:model="funder_name" type="text"
                                   class="form-control @error('funder_name') is-invalid @enderror">
                            @error('funder_name')
                            <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="form-group mb-3">
                            <label class="small font-weight-bold text-uppercase text-muted">Tranche Name</label>
                            <input wire:model="tranche_name" type="text"
                                   class="form-control @error('tranche_name') is-invalid @enderror">
                            @error('tranche_name')
                            <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="form-group mb-3">
                            <label class="small font-weight-bold text-uppercase text-muted">Amount per Case (£)</label>
                            <input wire:model="amount_per_case" type="number" step="0.01"
                                   class="form-control @error('amount_per_case') is-invalid @enderror">
                            @error('amount_per_case')
                            <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="form-group mb-3">
                            <label class="small font-weight-bold text-uppercase text-muted">Description</label>
                            <textarea wire:model="description" rows="3" class="form-control"></textarea>
                        </div>
                        <div class="form-group mb-0">

                            <label class="small font-weight-bold text-uppercase text-muted">Funding Date</label>
                            <input wire:model="funded_date" type="date"
                                   class="form-control @error('funded_date') is-invalid @enderror">
                            @error('funded_date')
                            <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>
                    <div class="modal-footer border-top-0 bg-light">
                        <button wire:click="closeModal" class="btn btn-secondary px-4">Cancel</button>
                        @canany(['tranches.create', 'tranches.edit'])
                        <button wire:click="save" class="btn btn-primary px-4 font-weight-bold">Save Tranche</button>
                        @endcanany
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- Delete Confirmation Modal -->
    @if($confirmingDeletion)
        <div class="modal fade show d-block" tabindex="-1" style="--bs-offcanvas-width: 600px;" role="dialog"
             style="background: rgba(0,0,0,0.5);">
            <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
                <div class="modal-content border-0 shadow-lg">
                    <div class="modal-body text-center p-4">
                        <div class="text-danger mb-3">
                            <i class="fa fa-exclamation-circle fa-3x"></i>
                        </div>
                        <h5 class="font-weight-bold mb-2">Delete Tranche?</h5>
                        <p class="text-muted small">Are you sure you want to delete this tranche? This action cannot be
                            undone.</p>
                        <div class="d-flex justify-content-center mt-4">
                            <button wire:click="$set('confirmingDeletion', false)" class="btn btn-light mr-2">Cancel
                            </button>
                            <button wire:click="delete" class="btn btn-danger font-weight-bold">Delete Permanently
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>