@extends('layouts.client')
@section('title','TRA CỨU HÓA ĐƠN')
@section('content-clients')
<div class="main-posts">
    <div class="container mt-1" style="padding: 70px 0; min-height: 100vh;">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card shadow-lg border-0 rounded">
                    <div class="card-header text-center bg-dark text-white py-4 rounded-top">
                        <h2 class="fw-bold mb-0">TRA CỨU ĐƠN HÀNG</h2>
                    </div>
                    <div class="card-body p-4">
                        <form action="" method="POST" onsubmit="saveInputToCookies()">
                            @csrf
                            <div class="row">
                                <div class="col-6 mb-3">
                                    <label for="so_dien_thoai" class="form-label">Số điện thoại <span style="color:red">(*)</span></label>
                                    <input type="number" placeholder="Nhập số điện thoại đặt hàng..." value="{{ request('so_dien_thoai') }}" class="form-control" min="1" id="so_dien_thoai" name="so_dien_thoai" required>
                                </div>
                                <div class="col-6 mb-3">
                                    <label for="email" class="form-label">Email <span style="color:red">(*)</span></label>
                                    <input type="email" placeholder="Nhập email đặt hàng..." value="{{ request('email') }}" id="email" class="form-control" name="email" required>
                                </div>
                                <div class="col-6 mb-3 d-flex">
                                    <input type="text" name="captcha" class="form-control me-5" placeholder="Nhập mã xác thực từ ảnh" required>
                                    <div id="captcha-img">{!! Captcha::img('mini') !!}</div>
                                    <button type="button" class="btn btn-secondary" id="reload-captcha" style="margin-left: 10px;">
                                        <i class="fas fa-sync-alt"></i> <!-- Biểu tượng refresh -->
                                    </button>
                                </div>
                                
                                
                                @if ($errors->has('captcha'))
                                    <div class="alert alert-danger">
                                        {{ $errors->first('captcha') }}
                                    </div>
                                @endif
                            </div>
                            <button type="submit" class="btn btn-primary w-100">TRA CỨU ĐƠN HÀNG</button>
                        </form>
                        @if(!empty($orders) && count($orders) > 0)
                            <h3 class="mt-4 text-center">DANH SÁCH HÓA ĐƠN</h3>
                            <div class="table-responsive">
                                <table class="table table-borderless table-hover align-middle">
                                    <thead class="text-center" style="background-color: #2563EB; color:white;">
                                        <tr>
                                            <th>STT</th>
                                            <th>Mã Đơn</th>
                                            <th>Tên Người Đặt</th>
                                            <th>Ngày Đặt</th>
                                            <th>Tổng Tiền</th>
                                            <th>Trạng Thái</th>
                                            <th>Hành Động</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center">
                                        @foreach($orders as $index => $order)
                                            <tr>
                                                <td>{{ $index + 1 }}</td>
                                                <td>{{ $order->id }}</td>
                                                <td>
                                                    @if($order->ho_ten == null)
                                                        {{ $order->User->ho_ten }}
                                                    @else
                                                        {{ $order->ho_ten }}
                                                    @endif
                                                </td>
                                                <td>{{ $order->created_at->format('d/m/Y') }}</td>
                                                <td>{{ number_format($order->tong_tien, 0, ',', '.') }} đ</td>
                                                <td>
                                                    @if($order->trang_thai == 1)
                                                        <span class="badge bg-success py-2 px-3">Đang giao</span>
                                                    @elseif($order->trang_thai == 2)
                                                        <span class="badge bg-warning text-dark py-2 px-3">Hoàn tất</span>
                                                    @elseif($order->trang_thai == 3)
                                                        <span class="badge bg-primary py-2 px-3">Đã hủy</span>
                                                    @elseif($order->trang_thai == 4)
                                                        <span class="badge bg-danger py-2 px-3">Trả hàng</span>
                                                    @elseif($order->trang_thai == 5)
                                                        <span class="badge bg-success py-2 px-3">Đặt hàng</span>
                                                    @else
                                                        <span class="badge bg-primary py-2 px-3">Đang xử lý</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <a href="{{ route('home.findOrder.detailOrder', ['id' => $order->id, 'so_dien_thoai' => $order->so_dien_thoai, 'email' => $order->email]) }}" class="btn btn-outline-info btn-sm w-100">Xem Chi Tiết</a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <div class="pagination d-flex justify-content-center mt-3">
                                {{ $orders->links() }}
                            </div>
                        @else
                            <div class="alert alert-warning text-center mt-4" role="alert">
                                Không tìm thấy hóa đơn nào!
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        // Function to save input to cookies
        function saveInputToCookies() {
            document.cookie = "so_dien_thoai=" + document.getElementById('so_dien_thoai').value + "; path=/; max-age=31536000";
            document.cookie = "email=" + document.getElementById('email').value + "; path=/; max-age=31536000";
        }
    
        // Function to get cookie by name
        function getCookie(name) {
            const value = `; ${document.cookie}`;
            const parts = value.split(`; ${name}=`);
            if (parts.length === 2) return parts.pop().split(';').shift();
        }
    
        // Load cookie data into input fields on page load
        window.onload = function() {
            document.getElementById('so_dien_thoai').value = getCookie('so_dien_thoai') || '';
            document.getElementById('email').value = getCookie('email') || '';
        }
    </script>
</div>
@endsection
@section('stylesheetAccount')
<style>
    .main-posts {
        background-color: #F9FAFB;
    }

    .card {
        border-radius: 12px;
        overflow: hidden;
    }

    .card-header {
        font-size: 1.25rem;
        font-weight: 600;
        background: linear-gradient(135deg, #1F2937 0%, #4B5563 100%);
        color: #FFFFFF;
    }

    .form-label {
        font-weight: 500;
        color: #4B5563;
    }

    .btn-primary {
        background-color: #2563EB;
        border: none;
        border-radius: 6px;
        transition: background-color 0.3s;
    }

    .btn-primary:hover {
        background-color: #1D4ED8;
    }

    .table-responsive {
        margin-top: 1.5rem;
    }

    .badge {
        font-size: 0.85rem;
        font-weight: 500;
        padding: 0.5em 0.75em;
        border-radius: 6px;
    }

    .btn-outline-info {
        color: #2563EB;
        border-color: #2563EB;
        transition: 0.3s;
    }

    .btn-outline-info:hover {
        color: #fff;
        background-color: #2563EB;
        border-color: #2563EB;
    }
</style>

@endsection