@extends('layouts.main')

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Statement Request Details</h3>
            <div class="card-toolbar">
                <a href="{{ route('statements.index') }}" class="btn btn-sm btn-info me-2">
                    <i class="ki-duotone ki-arrow-left fs-2"></i>Back to List
                </a>

                @if($statement->is_available && $statement->authorization_status === 'approved')
                    <a href="{{ route('statements.download', $statement->id) }}" class="btn btn-sm btn-primary">
                        <i class="ki-duotone ki-document fs-2"></i>Download Statement
                    </a>
                @endif
            </div>
        </div>

        <div class="card-body">
            @if(session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif

            <div class="grid grid-cols-2 gap-5 g-5">
                <!-- Left Column - Statement Information -->
                <div class="card card-flush h-xl-100 shadow-sm">
                    <div class="card-header">
                        <div class="card-title">
                            <h2>Statement Information</h2>
                        </div>
                    </div>
                    <div class="card-body py-5">
                        <div class="d-flex flex-column gap-5">
                            <div class="d-flex flex-column">
                                <div class="text-gray-500 fw-semibold">Branch</div>
                                <div class="fw-bold fs-5">{{ $statement->branch->name ?? 'N/A' }} ({{ $statement->branch_code }})</div>
                            </div>

                            <div class="d-flex flex-column">
                                <div class="text-gray-500 fw-semibold">Account Number</div>
                                <div class="fw-bold fs-5">{{ $statement->account_number }}</div>
                            </div>

                            <div class="d-flex flex-column">
                                <div class="text-gray-500 fw-semibold">Period</div>
                                <div class="fw-bold fs-5">
                                    @php
                                        // Convert format YYYYMM to Month Year
                                        $fromYear = substr($statement->period_from, 0, 4);
                                        $fromMonth = substr($statement->period_from, 4, 2);
                                        $fromMonthName = date('F', mktime(0, 0, 0, $fromMonth, 1));

                                        $periodText = $fromMonthName . ' ' . $fromYear;

                                        if($statement->is_period_range && $statement->period_to) {
                                            $toYear = substr($statement->period_to, 0, 4);
                                            $toMonth = substr($statement->period_to, 4, 2);
                                            $toMonthName = date('F', mktime(0, 0, 0, $toMonth, 1));

                                            $periodText .= ' - ' . $toMonthName . ' ' . $toYear;
                                        }
                                    @endphp
                                    {{ $periodText }}
                                </div>
                            </div>

                            <div class="d-flex flex-column">
                                <div class="text-gray-500 fw-semibold">Availability</div>
                                <div>
                                    @if($statement->is_available)
                                        <span class="badge badge-success">Available</span>
                                    @else
                                        <span class="badge badge-danger">Not Available</span>
                                    @endif
                                </div>
                            </div>

                            <div class="d-flex flex-column">
                                <div class="text-gray-500 fw-semibold">Downloaded</div>
                                <div>
                                    @if($statement->is_downloaded)
                                        <span class="badge badge-success">Yes</span>
                                        <div class="text-muted mt-1">
                                            Downloaded at: {{ $statement->downloaded_at ? $statement->downloaded_at->format('d M Y H:i:s') : 'N/A' }}
                                        </div>
                                    @else
                                        <span class="badge badge-light-primary">No</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Column - Request Information -->
                <div class="card card-flush h-xl-100 shadow-sm">
                    <div class="card-header">
                        <div class="card-title">
                            <h2>Request Information</h2>
                        </div>
                    </div>
                    <div class="card-body py-5">
                        <div class="d-flex flex-column gap-5">
                            <div class="d-flex flex-column">
                                <div class="text-gray-500 fw-semibold">Requested By</div>
                                <div class="fw-bold fs-5">{{ $statement->user->name ?? 'N/A' }}</div>
                            </div>

                            <div class="d-flex flex-column">
                                <div class="text-gray-500 fw-semibold">Requested At</div>
                                <div class="fw-bold fs-5">{{ dateFormat($statement->created_at,1,1) }}</div>
                            </div>

                            <div class="d-flex flex-column">
                                <div class="text-gray-500 fw-semibold">IP Address</div>
                                <div class="fw-bold fs-5">{{ $statement->ip_address }}</div>
                            </div>

                            <div class="d-flex flex-column">
                                <div class="text-gray-500 fw-semibold">User Agent</div>
                                <div class="text-muted small">{{ $statement->user_agent }}</div>
                            </div>

                            @if($statement->authorization_status !== 'pending')
                                <div class="d-flex flex-column">
                                    <div class="text-gray-500 fw-semibold">Authorized By</div>
                                    <div class="fw-bold fs-5">{{ $statement->authorizer->name ?? 'N/A' }}</div>
                                </div>

                                <div class="d-flex flex-column">
                                    <div class="text-gray-500 fw-semibold">Authorized At</div>
                                    <div class="fw-bold fs-5">{{ $statement->authorized_at ? $statement->authorized_at->format('d M Y H:i:s') : 'N/A' }}</div>
                                </div>

                                @if($statement->remarks)
                                    <div class="d-flex flex-column">
                                        <div class="text-gray-500 fw-semibold">Remarks</div>
                                        <div class="fw-bold fs-5">{{ $statement->remarks }}</div>
                                    </div>
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            @if($statement->authorization_status === 'pending' && auth()->user()->can('authorize_statements'))
                <div class="card shadow-sm mt-7">
                    <div class="card-header">
                        <h3 class="card-title">Authorization</h3>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('webstatement.statements.authorize', $statement->id) }}" method="POST">
                            @csrf

                            <div class="mb-5">
                                <label class="form-label required">Authorization Decision</label>
                                <div class="d-flex">
                                    <div class="form-check form-check-custom form-check-solid me-5">
                                        <input class="form-check-input" type="radio" name="authorization_status" value="approved" id="status_approved" required/>
                                        <label class="form-check-label" for="status_approved">
                                            Approve
                                        </label>
                                    </div>
                                    <div class="form-check form-check-custom form-check-solid">
                                        <input class="form-check-input" type="radio" name="authorization_status" value="rejected" id="status_rejected" required/>
                                        <label class="form-check-label" for="status_rejected">
                                            Reject
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-5">
                                <label class="form-label">Remarks</label>
                                <textarea class="form-control" name="remarks" rows="3" placeholder="Enter any remarks or reasons for your decision"></textarea>
                            </div>

                            <div class="text-end">
                                <button type="submit" class="btn btn-primary">Submit Authorization</button>
                            </div>
                        </form>
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        // Any additional JavaScript for this page
        document.addEventListener('DOMContentLoaded', function () {
            // Initialize any components if needed
        });
    </script>
@endpush