@extends('layouts.app')

@section('title', 'List Orders')

@section('content')

<div class="container-fluid">

    {{-- =========================================================
    PAGE HEADER
    ========================================================== --}}

    <div class="row">

        <div class="col-sm-12">

            <div class="card card-transparent card-block card-stretch card-height border-none">

                <div class="card-body p-0 mt-lg-2 mt-0 d-flex align-items-center justify-content-between flex-wrap">

                    <div>

                        <h3 class="mb-2">
                            Order Management
                        </h3>

                        <p class="mb-0 mr-4">
                            View, search, and manage all customer orders.
                        </p>

                    </div>

                </div>

            </div>

        </div>

    </div>


    {{-- =========================================================
    SUMMARY CARDS
    ========================================================== --}}

    <div class="row">

        {{-- TOTAL ORDERS --}}
        <div class="col-md-6 col-lg-3">

            <div class="card card-block card-stretch card-height">

                <div class="card-body">

                    <div class="d-flex align-items-center justify-content-between">

                        <div>

                            <p class="mb-1">
                                Total Orders
                            </p>

                            <h3 class="mb-0">
                                {{ $totalOrders }}
                            </h3>

                        </div>

                        <div class="rounded-circle iq-card-icon bg-primary-subtle p-3">

                            <i
                                class="las la-shopping-cart text-primary"
                                style="font-size:28px;"
                            ></i>

                        </div>

                    </div>

                    <div class="iq-progress-bar mt-2">

                        <span
                            class="bg-success iq-progress progress-1"
                            data-percent="64"
                        ></span>

                    </div>

                </div>

            </div>

        </div>


        {{-- PENDING ORDERS --}}
        <div class="col-md-6 col-lg-3">

            <div class="card card-block card-stretch card-height">

                <div class="card-body">

                    <div class="d-flex align-items-center justify-content-between">

                        <div>

                            <p class="mb-1">
                                Pending Orders
                            </p>

                            <h3 class="mb-0">
                                {{ $pendingOrders }}
                            </h3>

                        </div>

                        <div class="rounded-circle iq-card-icon bg-warning-subtle p-3">

                            <i
                                class="las la-hourglass-half text-warning"
                                style="font-size:28px;"
                            ></i>

                        </div>

                    </div>

                    <div class="iq-progress-bar mt-2">

                        <span
                            class="bg-success iq-progress progress-1"
                            data-percent="64"
                        ></span>

                    </div>

                </div>

            </div>

        </div>


        {{-- COMPLETED ORDERS --}}
        <div class="col-md-6 col-lg-3">

            <div class="card card-block card-stretch card-height">

                <div class="card-body">

                    <div class="d-flex align-items-center justify-content-between">

                        <div>

                            <p class="mb-1">
                                Completed Orders
                            </p>

                            <h3 class="mb-0">
                                {{ $completedOrders }}
                            </h3>

                        </div>

                        <div class="rounded-circle iq-card-icon bg-success-subtle p-3">

                            <i
                                class="las la-check-circle text-success"
                                style="font-size:28px;"
                            ></i>

                        </div>

                    </div>

                    <div class="iq-progress-bar mt-2">

                        <span
                            class="bg-success iq-progress progress-1"
                            data-percent="64"
                        ></span>

                    </div>

                </div>

            </div>

        </div>


        {{-- CREATE NEW ORDER --}}
        <div class="col-md-6 col-lg-3">

            <div class="card card-block card-stretch card-height">

                <div class="card-body d-flex align-items-center justify-content-center">

                    <a
                        href="{{ route('orders.add') }}"
                        class="btn btn-primary"
                    >

                        <i class="las la-plus mr-1"></i>

                        Create New Order

                    </a>

                </div>

            </div>

        </div>

    </div>


    {{-- =========================================================
    SEARCH & FILTER
    ========================================================== --}}

    <div class="row">

        <div class="col-lg-12">

            <div class="card card-block card-stretch card-height">

                <div class="card-header d-flex justify-content-between">

                    <div class="header-title">

                        <h4 class="card-title">
                            Search &amp; Filter Orders
                        </h4>

                    </div>

                </div>


                <div class="card-body">

                    <form
                        method="GET"
                        action="{{ route('orders.list') }}"
                    >

                        <div class="row align-items-end">

                            {{-- SEARCH ORDER --}}
                            <div class="col-md-4 form-group">

                                <label for="searchOrder">
                                    Search Order
                                </label>

                                <input
                                    type="text"
                                    name="search"
                                    class="form-control"
                                    id="searchOrder"
                                    value="{{ request('search') }}"
                                    placeholder="Order Number or Customer Name"
                                >

                            </div>


                            {{-- STATUS --}}
                            <div class="col-md-3 form-group">

                                <label for="filterStatus">
                                    Order Status
                                </label>

                                <select
                                    name="status"
                                    class="form-control custom-select"
                                    id="filterStatus"
                                >

                                    <option value="">
                                        All
                                    </option>

                                    @foreach($statuses as $status)

                                        <option
                                            value="{{ $status->status_id }}"
                                            {{ request('status') == $status->status_id ? 'selected' : '' }}
                                        >

                                            {{ $status->status_name }}

                                        </option>

                                    @endforeach

                                </select>

                            </div>


                            {{-- DATE --}}
                            <div class="col-md-3 form-group">

                                <label for="filterDate">
                                    Order Date
                                </label>

                                <input
                                    type="date"
                                    name="order_date"
                                    class="form-control"
                                    id="filterDate"
                                    value="{{ request('order_date') }}"
                                >

                            </div>


                            {{-- SEARCH BUTTON --}}
                            <div class="col-md-2 form-group d-flex">

                                <button
                                    type="submit"
                                    class="btn btn-primary mr-2 w-100"
                                >

                                    <i class="las la-search mr-1"></i>

                                    Search

                                </button>

                            </div>

                        </div>


                        {{-- RESET --}}
                        <div class="row">

                            <div class="col-12 text-right">

                                <a
                                    href="{{ route('orders.list') }}"
                                    class="btn btn-secondary btn-sm"
                                >

                                    <i class="las la-redo mr-1"></i>

                                    Reset

                                </a>

                            </div>

                        </div>

                    </form>

                </div>

            </div>

        </div>

    </div>


    {{-- =========================================================
    ORDERS TABLE
    ========================================================== --}}

    <div class="row">

        <div class="col-lg-12">

            <div class="card card-block card-stretch card-height">

                <div class="card-header d-flex justify-content-between align-items-center flex-wrap">

                    <div class="header-title">

                        <h4 class="card-title">
                            All Orders
                        </h4>

                    </div>


                    <div class="card-header-toolbar d-flex align-items-center">

                        <span class="text-muted">

                            {{ $orders->count() }} order(s)

                        </span>

                    </div>

                </div>


                <div class="card-body">

                    <div class="table-responsive">

                        <table class="table table-striped table-bordered mb-0">

                            <thead>

                                <tr>

                                    <th>
                                        Order Number
                                    </th>

                                    <th>
                                        Order Date
                                    </th>

                                    <th style="min-width:160px;">
                                        Customer Name
                                    </th>

                                    <th>
                                        Total Items
                                    </th>

                                    <th>
                                        Grand Total
                                    </th>

                                    <th>
                                        Payment Status
                                    </th>

                                    <th>
                                        Order Status
                                    </th>

                                    <th>
                                        Taken By
                                    </th>

                                    <th class="text-center">
                                        Actions
                                    </th>

                                </tr>

                            </thead>


                            <tbody>

                                @forelse($orders as $order)

                                    <tr>

                                        {{-- ORDER NUMBER --}}
                                        <td>

                                            <strong>
                                                {{ $order->serial_number }}
                                            </strong>

                                        </td>


                                        {{-- ORDER DATE --}}
                                        <td>

                                            @if($order->taken_at)

                                                {{ \Carbon\Carbon::parse($order->taken_at)->format('d M Y') }}

                                            @else

                                                N/A

                                            @endif

                                        </td>


                                        {{-- CUSTOMER --}}
                                        <td>

                                            @if($order->customer)

                                                <strong>
                                                    {{ $order->customer->customer_name }}
                                                </strong>

                                                @if($order->customer->shop_name)

                                                    <br>

                                                    <small class="text-muted">

                                                        {{ $order->customer->shop_name }}

                                                    </small>

                                                @endif

                                            @else

                                                N/A

                                            @endif

                                        </td>


                                        {{-- TOTAL ITEMS --}}
                                        <td>

                                            {{ $order->details->sum('quantity') }}

                                        </td>


                                        {{-- GRAND TOTAL --}}
                                        <td>

                                            <strong>

                                                Rs.
                                                {{ number_format((float) $order->total_amount, 2) }}

                                            </strong>

                                        </td>


                                        {{-- PAYMENT STATUS --}}
                                        <td>

                                            <span class="badge badge-warning">

                                                Pending

                                            </span>

                                        </td>


                                        {{-- ORDER STATUS --}}
                                        <td>

                                            @php

                                                $statusName = strtolower(
                                                    $order->status->status_name ?? ''
                                                );

                                            @endphp


                                            @if(
                                                $statusName === 'delivered' ||
                                                $statusName === 'completed'
                                            )

                                                <span class="badge badge-success">

                                                    {{ $order->status->status_name }}

                                                </span>

                                            @elseif($statusName === 'pending')

                                                <span class="badge badge-warning">

                                                    {{ $order->status->status_name }}

                                                </span>

                                            @elseif($statusName === 'cancelled')

                                                <span class="badge badge-danger">

                                                    {{ $order->status->status_name }}

                                                </span>

                                            @else

                                                <span class="badge badge-info">

                                                    {{ $order->status->status_name ?? 'N/A' }}

                                                </span>

                                            @endif

                                        </td>


                                        {{-- TAKEN BY --}}
                                        <td>

                                            @if($order->takenBy)

                                                {{ $order->takenBy->user_name }}

                                            @else

                                                N/A

                                            @endif

                                        </td>


                                        {{-- ACTIONS --}}
                                        <td class="text-center">

                                            @if($order->invoice)

                                                {{-- VIEW INVOICE --}}
                                                <a
                                                    href="{{ route('invoices.show', $order->invoice->invoice_id) }}"
                                                    class="badge bg-primary mr-1"
                                                    title="View Invoice"
                                                >

                                                    <i class="las la-eye"></i>

                                                </a>


                                                {{-- EDIT ORDER --}}
                                                <a
                                                    href="{{ route('orders.edit', $order->order_id) }}"
                                                    class="badge bg-warning mr-1"
                                                    title="Edit Order"
                                                >

                                                    <i class="las la-edit"></i>

                                                </a>


                                                {{-- DELETE INVOICE --}}
                                                <form
                                                    action="{{ route('invoices.destroy', $order->invoice->invoice_id) }}"
                                                    method="POST"
                                                    style="display:inline-block;"
                                                    onsubmit="return confirm('Are you sure you want to delete this invoice?');"
                                                >

                                                    @csrf

                                                    @method('DELETE')

                                                    <button
                                                        type="submit"
                                                        class="badge bg-danger border-0"
                                                        title="Delete Invoice"
                                                        style="cursor:pointer;"
                                                    >

                                                        <i class="las la-trash"></i>

                                                    </button>

                                                </form>

                                            @else

                                                <span class="text-muted">
                                                    No Invoice
                                                </span>

                                            @endif

                                        </td>

                                    </tr>


                                @empty

                                    <tr>

                                        <td
                                            colspan="9"
                                            class="text-center py-4"
                                        >

                                            <div class="text-muted">

                                                <i
                                                    class="las la-shopping-cart"
                                                    style="font-size:40px;"
                                                ></i>

                                                <h5 class="mt-2">
                                                    No Orders Found
                                                </h5>

                                                <p class="mb-0">
                                                    There are no orders matching your search.
                                                </p>

                                            </div>

                                        </td>

                                    </tr>

                                @endforelse

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

@endsection