@extends('layouts.admin')
@section('title')
    {{$title}}
@endsection

@section('stylesheetOrder')
<style>
    .btn-light {
        background-color: #ccc; /* Màu nền sáng */
        color: #212529; /* Màu chữ tối */
    }

    .btn-light:hover {
        background-color: #e2e6ea; /* Màu nền sáng khi hover */
    }
    .findOrder {
        display: flex;
        justify-content: center;
        margin: 5px 0;
    }

    .search-form {
        display: flex;
        align-items: center;
        background-color: #f8f9fa;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        width: 100%;
    }

    .search-input {
        flex: 0.5;
        margin-left: 5px;
        padding: 6px 15px;
        border: none;
        outline: none;
        font-size: 16px;
        color: #495057;
    }

    .search-input::placeholder {
        color: #adb5bd;
    }

    .search-button {
        background-color: #007bff;
        border: none;
        color: #fff;
        padding: 4px 20px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .search-button:hover {
        background-color: #0056b3;
    }

    .search-button:focus {
        outline: none;
    }
</style>
@endsection
<link rel="stylesheet" href="{{asset('assets/admin/css/custom_show.css')}}">
@section('content-admin')
<div class="wrapper wrapper-content">
    <div class="container-fluid"> <!-- Changed to container-fluid -->
        <div class="text-center mb-4 fw-bold d-flex justify-content-center align-items-center">
            <img src="{{asset('assets/general/img/logoDAU.png')}}" alt="" class="img-fluid me-2" style="width: 40px;">
            <h1 id="title-top" class="ms-3 mb-0" style="font-size: 22px">{{$title}}</h1>
        </div>
        @if(session('msg'))
            <div class="alert alert-success">
                {{ session('msg') }}
            </div>
        @endif
        <div class="statusOrder d-flex">
            <div class="status-item">
                <a href="{{ route('admin.orders.index') }}" class="btn btn-sm {{ is_null($trang_thai) ? 'btn-success' : 'btn-light' }} text-white" style="min-width: 100px">Tất Cả</a>
            </div>
            <div class="status-item">
                <a class="btn btn-sm {{ ($trang_thai == 5 && !is_null($trang_thai)) ? 'btn-warning' : 'btn-light' }} text-white" style="min-width: 100px" href="{{ route('admin.orders.index', ['trang_thai' => 5]) }}">Đã đặt</a>
            </div>
            <div class="status-item">
                <a class="btn btn-sm {{ ($trang_thai == 0 && !is_null($trang_thai)) ? 'btn-warning' : 'btn-light' }} text-white" style="min-width: 100px" href="{{ route('admin.orders.index', ['trang_thai' => 0]) }}">Đang xử lý</a>
            </div>
            <div class="status-item">
                <a class="btn btn-sm {{ $trang_thai == 1 ? 'btn-info' : 'btn-light' }} text-white" style="min-width: 100px" href="{{ route('admin.orders.index', ['trang_thai' => 1]) }}">Đang giao</a>
            </div>
            <div class="status-item">
                <a class="btn btn-sm {{ $trang_thai == 2 ? 'btn-success' : 'btn-light' }} text-white" style="min-width: 100px" href="{{ route('admin.orders.index', ['trang_thai' => 2]) }}">Hoàn Tất</a>
            </div>
            <div class="status-item">
                <a class="btn btn-sm {{ $trang_thai == 3 ? 'btn-danger' : 'btn-light' }} text-white" style="min-width: 100px" href="{{ route('admin.orders.index', ['trang_thai' => 3]) }}">Đã Hủy</a>
            </div>
            <div class="status-item">
                <a class="btn btn-sm {{ $trang_thai == 4 ? 'btn-danger' : 'btn-light' }} text-white" style="min-width: 100px" href="{{ route('admin.orders.index', ['trang_thai' => 4]) }}">Trả hàng</a>
            </div>
            
        </div>
        <div class="filterOrder">
            <form action="" method="get" class="search-form">
               <div class="date d-flex align-items-center">
                    <label for="ngay_bat_dau" class="mb-0">Từ ngày:</label>
                    <input type="date" name="ngay_bat_dau" id="ngay_bat_dau" placeholder="Từ ngày" value="{{ request('ngay_bat_dau') }}" class="form-control mx-2" style="width: 200px">
               </div>
               <div class="date d-flex align-items-center">
                    <label for="ngay_ket_thuc"  class="mb-0">Đến ngày:</label>
                    <input type="date" name="ngay_ket_thuc" id="ngay_ket_thuc" placeholder="Đến ngày" value="{{ request('ngay_ket_thuc') }}" class="form-control mx-2" style="width: 200px">
                </div>
                <input name="inputFindOrder" id="inputFindOrder" type="text" placeholder="Nhập maHD, username hoặc SĐT..." value="{{ request('inputFindOrder') }}" class="form-control search-input">
                <input type="hidden" name="trang_thai" value="{{ request('trang_thai') }}">
                <button type="submit" class="btn search-button">Tìm kiếm</button>
            </form>
        </div>
        <form action="{{route('admin.posts.deleteAny')}}" method="POST" onsubmit="return confirm('Bạn có chắc chắn muốn xóa')">
            @csrf
        <table class="table table-bordered mt-0">
            <thead>
                <tr class="text-center align-middle">
                    <th width="5%">STT</th>
                    <th >Tên KH</th>
                    <th >Số điện thoại</th>
                    <th >Địa chỉ giao hàng</th>
                    <th >Trạng Thái</th>
                    <th >Ngày đặt</th>
                    <th >Tổng tiền</th>
                    <th >TT thanh toán</th>
                    <th>HÀNH ĐỘNG</th>
                </tr>
            </thead>
            <tbody>
                @if(!empty($listOrder) && count($listOrder) > 0)
                    @foreach ($listOrder as $key => $item)
                    <tr class="align-middle">
                        <td>{{$key +1}}</td>
                        <td>
                            @if($item->ho_ten == null)
                                {{$item->ho_ten_account }}
                            @else
                                {{ $item->ho_ten }}
                            @endif

                        </td>
                        <td>
                            @if($item->ho_ten == null)
                                {{ $item->so_dien_thoai_account }}
                            @else
                                {{$item->so_dien_thoai}}
                            @endif
                        </td>
                        <td>
                            {{$item->district->name}}, {{$item->Province->name}}
                        </td>
                        <td>
                            @if($item->trang_thai == 0)
                                <span class="badge bg-warning w-100">Đang Xử Lý</span>
                            @elseif($item->trang_thai == 1)
                                <span class="badge bg-primary w-100">Đang Giao</span>
                            @elseif($item->trang_thai == 2)
                                <span class="badge bg-success w-100">Hoàn Tất</span>
                            @elseif($item->trang_thai == 3)
                                <span class="badge bg-danger w-100">Đã Hủy</span>
                            @elseif($item->trang_thai == 4)
                                <span class="badge bg-secondary w-100">Trả Hàng</span>
                            @elseif($item->trang_thai == 5)
                                <span class="badge bg-primary ss w-100">Đặt Hàng</span>
                            @endif


                        </td>
                        <td>
                            {{$item->created_at}}
                        </td>
                        <td>
                            {{number_format($item->tong_tien)}} VNĐ
                        </td>
                        <td>
                            @if($item->trang_thai_thanh_toan == 0)
                                <span class="badge bg-danger w-100">Chưa Thanh Toán</span>
                            @else
                                <span class="badge bg-success w-100">Đã Thanh Toán</span>
                            @endif
                        </td>
                        {{-- <td>
                            @if($item->ghi_chu == null)
                            <i class="fa-solid fa-xmark"></i>
                            @else
                            {{$item->ghi_chu}}
                            @endif
                        </td> --}}
                        <td>
                            <a href="{{ route('admin.orders.detailOrder', ['id'=>$item->id]) }}" class="btn btn-success btn-sm text-white" ><i class="fa-solid fa-eye"></i></a>
                            
                            <a href="{{ route('admin.orders.edit',['id'=>$item->id]) }}" class="btn btn-warning btn-sm"><i class="fa-solid fa-pen-to-square"></i></a>
                            
                            <form action="{{route('admin.orders.delete',['id'=>$item->id]) }}" method="POST" style="display:inline;" id="delete-form-{{$key}}">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm delete-user" data-form="delete-form-{{$key}}"><i class="fa-solid fa-trash"></i></button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                @else
                <tr>
                    <td colspan="8" class="text-center">KHÔNG CÓ ĐƠN HÀNG</td>
                </tr>
                @endif
            </tbody>
        </table>
        </form>
        <div class="d-flex justify-content-center mt-3">
            {{$listOrder->links()}}
        </div>  
    </div>
</div>
<script>
</script>
@endsection