@extends('layouts.master')
@section('title', $title)

@php
    $db_settings = \App\Models\Setting::get();
    $settings = [];
    foreach ($db_settings as $row) {
        $settings[$row->name] = $row->value;
    }
@endphp

@section('content')
<div id="filter_modal" class="modal fade" tabindex="-1" data-bs-backdrop="static" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="myModalLabel">
                    <span id="modal_operation_type">Filter</span> {{ $title }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('patients.patient.statement', $customer?->id) }}">
                    <div class="row">
                        <div class="col-6 mb-3">
                            <label for="start_date_filter" class="form-label"> Start Date <span>*</span></label>
                            <input type="date" class="form-control filter_input" name="start_date_filter"
                                id="start_date_filter" placeholder="" value="{{ $start_date }}">
                            <small class="text-danger errors"></small>
                        </div>

                        <div class="col-6 mb-3">
                            <label for="end_date_filter" class="form-label"> End Date <span>*</span></label>
                            <input type="date" class="form-control filter_input" name="end_date_filter"
                                id="end_date_filter" placeholder="" value="{{ $end_date }}">
                            <small class="text-danger errors"></small>
                        </div>
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="fas fa-times"></i>
                    {{ __('messages.btn_close') }}</button>
                <button type="submit" class="btn btn-danger" onclick="clear_btn()"><i class="fas fa-eraser mx-2"></i>
                    Clear</button>
                <button type="submit" class="btn btn-success" onclick="filter()"><i class="fas fa-filter mx-2"></i>
                    Filter</button>
            </div>
            </form>
        </div>
    </div>
</div>

<style>
    .statement-container {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }
    
    .statement-header {
        background: linear-gradient(120deg, #4361ee, #3a0ca3);
        color: white;
        padding: 25px 30px;
        border-radius: 12px 12px 0 0;
        text-align: center;
        position: relative;
    }
    
    .statement-header::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #f72585, #7209b7);
    }
    
    .clinic-logo {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    
    .clinic-name {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 5px;
        letter-spacing: 0.5px;
    }
    
    .clinic-details {
        font-size: 15px;
        opacity: 0.9;
    }
    
    .statement-title {
        font-size: 22px;
        font-weight: 600;
        margin: 15px 0;
        letter-spacing: 1px;
        text-transform: uppercase;
    }
    
    .patient-info-card {
        background: white;
        border-radius: 10px;
        padding: 20px;
        margin: 20px 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }
    
    .info-group {
        margin-bottom: 10px;
    }
    
    .info-label {
        font-weight: 600;
        color: #6c757d;
        font-size: 14px;
        margin-bottom: 4px;
    }
    
    .info-value {
        font-weight: 500;
        font-size: 16px;
    }
    
    .statement-table {
        width: 100%;
        border-collapse: collapse;
        margin: 25px 0;
        font-size: 15px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 0 0 1px #dee2e6;
    }
    
    .statement-table thead {
        background: linear-gradient(120deg, #4361ee, #3a0ca3);
        color: white;
    }
    
    .statement-table th {
        padding: 15px 12px;
        text-align: left;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 14px;
    }
    
    .statement-table td {
        padding: 14px 12px;
        border-bottom: 1px solid #dee2e6;
    }
    
    .statement-table tbody tr:last-child td {
        border-bottom: none;
    }
    
    .statement-table tbody tr:hover {
        background-color: rgba(67, 97, 238, 0.05);
    }
    
    .text-end {
        text-align: right;
    }
    
    .total-row {
        background-color: #f8f9fa;
        font-weight: 600;
    }
    
    .debit {
        color: #e74c3c;
        font-weight: 500;
    }
    
    .credit {
        color: #27ae60;
        font-weight: 500;
    }
    
    .balance {
        color: #4361ee;
        font-weight: 600;
    }
    
    .btn-action {
        display: inline-flex;
        align-items: center;
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.3s ease;
    }
    
    .btn-action i {
        margin-right: 8px;
    }
    
    .btn-action:hover {
        transform: translateY(-2px);
    }
    
    .header-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding: 15px 20px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    }
</style>

<div class="main-body">
    <div class="page-wrapper">
        <div class="row">
            <div class="col-sm-12">
                <div class="statement-container">
                    <div class="header-actions">
                        <h5>Patient Statement</h5>
                        <div>
                            <a href="#" class="btn btn-info btn-action"
                                onclick="print_div('print', 'Print customer statement', 800, 1000) ">
                                <i class="fas fa-print"></i>
                                Print
                            </a>
                            <a href="#" class="btn btn-info btn-action" data-bs-toggle="modal"
                                data-bs-target="#filter_modal">
                                <i class="fas fa-filter"></i>
                                Filter
                            </a>
                        </div>
                    </div>

                    <div id="print">
                        <div class="statement-header">
                            <div class="logo-container">
                                @if (isset($settings['icon']) && is_file('storage/settings/' . $settings['icon']))
                                    <img src="{{ asset('storage/settings/' . $settings['icon']) }}" class="clinic-logo" alt="Clinic Logo">
                                @endif
                                
                                <div class="clinic-info">
                                    <h1 class="clinic-name">{{ $settings['website_name'] ?? '' }}</h1>
                                    <div class="clinic-details">
                                        <p>{{ $settings['address'] ?? '' }}</p>
                                        <p>{{ $settings['number_1'] ?? '' }}{{ $settings['number_2'] ? ', ' . $settings['number_2'] : '' }}</p>
                                    </div>
                                </div>
                            </div>
                            
                            <h2 class="statement-title">Patient Statement</h2>
                        </div>

                        <div class="patient-info-card">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="info-group">
                                        <div class="info-label">Patient</div>
                                        <div class="info-value">{{ $customer?->name . ' ' . $customer?->phone }}</div>
                                    </div>
                                    
                                    <div class="info-group">
                                        <div class="info-label">Start Date</div>
                                        <div class="info-value">{{ $start_date }}</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="info-group">
                                        <div class="info-label">End Date</div>
                                        <div class="info-value">{{ $end_date }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="statement-table">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Date</th>
                                            <th>Description</th>
                                            <th class="text-end">Debit</th>
                                            <th class="text-end">Credit</th>
                                            <th class="text-end">Running Balance</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $counter = 1;
                                            $credit = 0;
                                            $debit = 0;
                                            $balance = 0;
                                        @endphp
                                        @foreach ($statement as $item)
                                            @php
                                                $debitAmount = floatval(str_replace(',', '', $item->debit));
                                                $creditAmount = floatval(str_replace(',', '', $item->credit));
                                                
                                                $balance += $debitAmount - $creditAmount;
                                                $debit += $debitAmount;
                                                $credit += $creditAmount;
                                            @endphp
                                            <tr>
                                                <td>{{ $counter++ }}</td>
                                                <td>{{ \Carbon\Carbon::parse($item->date)->format('d M, Y') }}</td>
                                                <td>{{ $item->description }}</td>
                                                <td class="text-end debit">{{ number_format($debitAmount, 2) }}</td>
                                                <td class="text-end credit">{{ number_format($creditAmount, 2) }}</td>
                                                <td class="text-end balance">{{ number_format($balance, 2) }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr class="total-row">
                                            <td colspan="3" class="text-end">Total</td>
                                            <td class="text-end">{{ number_format($debit, 2) }}</td>
                                            <td class="text-end">{{ number_format($credit, 2) }}</td>
                                            <td class="text-end">{{ number_format($balance, 2) }}</td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('page_js')
    <script></script>
@endsection