@extends('layouts.app')

@section('page-pretitle', __('Management'))
@section('page-title', __('Quotations'))

@section('content')
<div class="page-wrapper">

    <!-- Flash Messages -->
    @if ($errors->any())
        <div id="validation-alert" class="alert alert-danger alert-dismissible fade show position-fixed top-0 end-0 m-4 bg-red text-white d-flex align-items-center shadow" role="alert" style="z-index: 950; width: 450px;">
            <div class="flex-grow-1">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if (session('success'))
        <div id="success-alert" class="alert alert-success alert-dismissible fade show position-fixed top-0 end-0 m-4 bg-green text-white d-flex align-items-center shadow" role="alert" style="z-index: 950; width: 450px;">
            <div class="flex-grow-1">
                {{ session('success') }}
            </div>
            <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Responsive Styles for Alerts -->
    <style>
        @media (max-width: 768px) {
            #validation-alert, #success-alert {
                width: 90% !important;
                left: 5% !important;
            }
        }
        @media (max-width: 576px) {
            #validation-alert, #success-alert {
                width: 95% !important;
                left: 2.5% !important;
            }
        }
    </style>

    <div class="container">
        <div class="card shadow-sm">
            <!-- Search Filter (Collapsible) -->
            <div class="card-header d-flex flex-column" style="align-items: normal;">
                <div class="d-flex justify-content-between" data-bs-toggle="collapse" data-bs-target="#search-col" style="cursor: pointer;">
                    <h4 class="card-title">{{ __('Search Filter') }}</h4>
                    <div class="card-actions btn-actions">
                        <button type="button" class="btn-action" data-bs-toggle="collapse" data-bs-target="#search-col" aria-expanded="false" aria-controls="search-col">
                            <i class="ti ti-search"></i>
                        </button>
                    </div>
                </div>
                <div id="search-col" class="collapse mt-3 @if(request()->hasAny(['quotation_number', 'project', 'date'])) show @endif">
                    <form method="GET" action="{{ route('quotations.index') }}">
                        <input type="hidden" id="h-entries" name="entries" value="{{ request('entries') }}">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="quotation_number" name="quotation_number" value="{{ request('quotation_number') }}" autocomplete="off" placeholder="Quotation Number">
                                    <label for="quotation_number">{{ __('Quotation Number') }}</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="client_name" name="client_name" value="{{ request('client_name') }}" autocomplete="off" placeholder="Client Name">
                                    <label for="client_name">{{ __('Client Name') }}</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-floating">
                                    <input type="date" class="form-control" id="date" name="date" value="{{ request('date') }}" placeholder="Date">
                                    <label for="date">{{ __('Date') }}</label>
                                </div>
                            </div>
                            <div class="col-auto d-flex align-items-center">
                                <button type="submit" title="{{ __('Search') }}" name="q" value="1" class="btn btn-ghost-info me-1">
                                    <i class="ti ti-search"></i>
                                </button>
                                <a href="{{ route('quotations.index') }}" class="btn btn-ghost-yellow" title="{{ __('Reset') }}">
                                    <i class="ti ti-refresh"></i>
                                </a>
                            </div>

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

            <!-- Add Quotation Button -->
            <div class="card-body border-bottom py-3">
                <div class="d-flex">
                    @include('asset.entries')
                    @if(auth()->user()->role === 'admin')
                        <div class="ms-auto">
                            <div class="ms-auto">
                                @if (auth()->user()->role == 'admin')
                                    <a href="{{ route('quotations.create') }}" title="{{ __('Add') }} {{ __('Quotation') }}" class="btn btn-success">
                                        <i class="icon ti ti-plus"></i> {{ __('Add') }} {{ __('Quotation') }}
                                    </a>
                                @endif
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Table Body -->
            <div class="table-responsive">
                <table class="table card-table table-vcenter text-nowrap">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>{{ __('Quotation No.') }}</th>
                            <th>{{ __('Client Name') }}</th>
                            <th style="width: 10%;" >{{ __('Date') }}</th>
                            <th style="width: 10%;" class="text-start">{{ __('Total (RM)') }}</th>
                            <th class="text-center" style="width: 110px;">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($quotations as $quotation)
                        <tr>
                            <td>{{ $loop->iteration + ($quotations->currentPage() - 1) * $quotations->perPage() }}</td>
                            <td>{{ $quotation->quotation_number }}</td>
                            <td style="width: 50%; word-wrap: break-word; white-space: normal;">
                                {{ $quotation->client_name ?? '-' }}
                            </td>
                            <td>{{ \Carbon\Carbon::parse($quotation->date)->format('d/m/Y') }}</td>
                            <td class="text-start">RM {{ number_format($quotation->total, 2) }}</td>
                            <td class="text-center">
                                <div class="dropdown">
                                    <button class="btn btn-icon btn-light" type="button"
                                        id="dropdownMenuButton{{ $quotation->id }}"
                                        data-bs-toggle="dropdown"
                                        aria-expanded="false"
                                        onclick="event.stopPropagation();">
                                        <i class="ti ti-dots-vertical"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li>
                                            <a href="{{ route('quotations.show', $quotation) }}" class="dropdown-item text-primary">
                                                <i class="ti ti-eye me-2"></i> {{ __('View') }}
                                            </a>
                                        </li>
                                        {{-- <li>
                                            <a href="{{ route('quotations.pdf', $quotation) }}" class="dropdown-item text-secondary" target="_blank">
                                                <i class="ti ti-file-download me-2"></i> {{ __('Download PDF') }}
                                            </a>
                                        </li> --}}
                                        @if(auth()->user()->role === 'admin')
                                        <li>
                                            <a href="{{ route('quotations.edit', $quotation) }}" class="dropdown-item text-warning">
                                                <i class="ti ti-edit me-2"></i> {{ __('Edit') }}
                                            </a>
                                        </li>
                                        <li>
                                            <form action="{{ route('quotations.destroy', $quotation) }}" method="POST" onsubmit="event.stopPropagation(); return confirm('{{ __('Are you sure you want to delete this quotation?') }}');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="dropdown-item text-danger">
                                                    <i class="ti ti-trash me-2"></i> {{ __('Delete') }}
                                                </button>
                                            </form>
                                        </li>
                                        @endif
                                    </ul>
                                </div>
                            </td>

                                
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center">{{ __('No quotations found.') }}</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            @if ($quotations->hasPages())
            <div class="card-footer border-top py-3 d-flex justify-content-end">
                {{ $quotations->appends(request()->except('page'))->onEachSide(1)->links('pagination::bootstrap-5') }}
            </div>
            @endif

            <div class="card-footer">
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
document.addEventListener("DOMContentLoaded", () => {
    setTimeout(() => {
        const successAlert = document.getElementById('success-alert');
        if (successAlert) {
            successAlert.classList.remove('show');
        }
        const validationAlert = document.getElementById('validation-alert');
        if (validationAlert) {
            validationAlert.classList.remove('show');
        }
    }, 4000);
});
</script>
@endsection