@extends('Admin.layout')

@section('content')

<div class="container-fluid">

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

    <div class="d-flex align-items-center justify-content-between mb-4 mt-3">

        <div>

            <h5 class="mb-0">

                <a href="{{ route('admin.customer_management') }}"
                   class="btn btn-icon bg-white me-2 shadow-sm">

                    <i class="fa-solid fa-arrow-left"></i>

                </a>

                View Customer

            </h5>

        </div>


        <div class="d-flex gap-2">

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

                <i class="ti tabler-edit me-1"></i>

                Edit Customer

            </a>

        </div>

    </div>



    {{-- ========================================================= --}}
    {{-- CUSTOMER PROFILE --}}
    {{-- ========================================================= --}}

    <div class="card shadow-sm border-0 mb-4">

        <div class="card-body p-4">

            <div class="d-flex flex-column flex-md-row
                        align-items-md-center
                        justify-content-between
                        gap-3">

                <div class="d-flex align-items-center gap-3">

                    <div class="rounded-circle
                                bg-primary-subtle
                                d-flex
                                align-items-center
                                justify-content-center"
                         style="width:70px;height:70px;">

                        <span class="fw-bold fs-4 text-primary">
                            L
                        </span>

                    </div>


                    <div>

                        <h5 class="fw-bold mb-1">
                            Aurela
                        </h5>

                        <div class="text-muted">
                            Customer ID: CUS1001
                        </div>

                    </div>

                </div>


                <span class="badge bg-success px-3 py-2">
                    Active
                </span>

            </div>

        </div>

    </div>



    <div class="row g-4">


        {{-- ===================================================== --}}
        {{-- LEFT COLUMN --}}
        {{-- ===================================================== --}}

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


            {{-- ================================================= --}}
            {{-- CUSTOMER INFORMATION --}}
            {{-- ================================================= --}}

            <div class="card shadow-sm border-0 mb-4">

                <div class="card-body p-4">

                    <h6 class="fw-bold mb-4">
                        Customer Information
                    </h6>


                    <div class="row g-4">


                        {{-- FULL NAME --}}
                        <div class="col-md-6">

                            <small class="text-muted d-block mb-1">
                                Full Name
                            </small>

                            <strong>
                                Aurela
                            </strong>

                        </div>


                        {{-- EMAIL --}}
                        <div class="col-md-6">

                            <small class="text-muted d-block mb-1">
                                Email Address
                            </small>

                            <strong>
                                Aurela@gmail.com
                            </strong>

                        </div>


                        {{-- PHONE --}}
                        <div class="col-md-6">

                            <small class="text-muted d-block mb-1">
                                Phone Number
                            </small>

                            <strong>
                                9876543210
                            </strong>

                        </div>


                        {{-- REGISTERED DATE --}}
                        <div class="col-md-6">

                            <small class="text-muted d-block mb-1">
                                Registered On
                            </small>

                            <strong>
                                10 Aug 2026
                            </strong>

                        </div>


                        {{-- CUSTOMER STATUS --}}
                        <div class="col-md-6">

                            <small class="text-muted d-block mb-1">
                                Account Status
                            </small>

                            <span class="badge bg-success">
                                Active
                            </span>

                        </div>


                        {{-- CUSTOMER ID --}}
                        <div class="col-md-6">

                            <small class="text-muted d-block mb-1">
                                Customer ID
                            </small>

                            <strong>
                                CUS1001
                            </strong>

                        </div>

                    </div>

                </div>

            </div>



            {{-- ================================================= --}}
            {{-- ADDRESS INFORMATION --}}
            {{-- ================================================= --}}

            <div class="card shadow-sm border-0 mb-4">

                <div class="card-body p-4">

                    <h6 class="fw-bold mb-4">
                        Address Information
                    </h6>


                    <div class="border rounded-3 p-3">

                        <h6 class="fw-bold mb-2">
                            Aurela
                        </h6>


                        <p class="text-muted mb-2">

                            123, ABC Street,<br>
                            Near XYZ Mall,<br>
                            Chennai,<br>
                            Tamil Nadu - 600001

                        </p>


                        <div class="text-muted">

                            <i class="fa-solid fa-phone me-2"></i>

                            9876543210

                        </div>

                    </div>

                </div>

            </div>



            {{-- ================================================= --}}
            {{-- RECENT ORDERS --}}
            {{-- ================================================= --}}

            <div class="card shadow-sm border-0 mb-4">

                <div class="card-body p-4">

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

                        <h6 class="fw-bold mb-0">
                            Recent Orders
                        </h6>

                        <a href=""
                           class="text-primary text-decoration-none">

                            View All

                        </a>

                    </div>


                    <div class="table-responsive">

                        <table class="table align-middle mb-0">

                            <thead>

                                <tr>

                                    <th>ORDER ID</th>
                                    <th>DATE</th>
                                    <th>AMOUNT</th>
                                    <th>STATUS</th>
                                    <th>ACTION</th>

                                </tr>

                            </thead>


                            <tbody>


                                {{-- ORDER 1 --}}
                                <tr>

                                    <td>
                                        <strong>
                                            ORD1025
                                        </strong>
                                    </td>

                                    <td>
                                        18 Aug 2026
                                    </td>

                                    <td>
                                        ₹35,048
                                    </td>

                                    <td>

                                        <span class="badge bg-warning text-dark">
                                            Processing
                                        </span>

                                    </td>

                                    <td>

                                        <a href="{{ route('admin.view_order') }}"
                                           class="btn btn-primary btn-sm">

                                            <i class="ti tabler-eye"></i>

                                        </a>

                                    </td>

                                </tr>


                                {{-- ORDER 2 --}}
                                <tr>

                                    <td>
                                        <strong>
                                            ORD1018
                                        </strong>
                                    </td>

                                    <td>
                                        12 Aug 2026
                                    </td>

                                    <td>
                                        ₹18,500
                                    </td>

                                    <td>

                                        <span class="badge bg-success">
                                            Delivered
                                        </span>

                                    </td>

                                    <td>

                                        <a href="{{ route('admin.view_order') }}"
                                           class="btn btn-primary btn-sm">

                                            <i class="ti tabler-eye"></i>

                                        </a>

                                    </td>

                                </tr>


                                {{-- ORDER 3 --}}
                                <tr>

                                    <td>
                                        <strong>
                                            ORD1009
                                        </strong>
                                    </td>

                                    <td>
                                        05 Aug 2026
                                    </td>

                                    <td>
                                        ₹12,000
                                    </td>

                                    <td>

                                        <span class="badge bg-danger">
                                            Cancelled
                                        </span>

                                    </td>

                                    <td>

                                        <a href="{{ route('admin.view_order') }}"
                                           class="btn btn-primary btn-sm">

                                            <i class="ti tabler-eye"></i>

                                        </a>

                                    </td>

                                </tr>


                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>



        {{-- ===================================================== --}}
        {{-- RIGHT COLUMN --}}
        {{-- ===================================================== --}}

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


            {{-- ================================================= --}}
            {{-- ORDER SUMMARY --}}
            {{-- ================================================= --}}

            <div class="card shadow-sm border-0 mb-4">

                <div class="card-body p-4">

                    <h6 class="fw-bold mb-4">
                        Order Summary
                    </h6>


                    <div class="d-flex
                                justify-content-between
                                mb-3">

                        <span class="text-muted">
                            Total Orders
                        </span>

                        <strong>
                            8
                        </strong>

                    </div>


                    <div class="d-flex
                                justify-content-between
                                mb-3">

                        <span class="text-muted">
                            Completed Orders
                        </span>

                        <strong>
                            5
                        </strong>

                    </div>


                    <div class="d-flex
                                justify-content-between
                                mb-3">

                        <span class="text-muted">
                            Processing Orders
                        </span>

                        <strong>
                            1
                        </strong>

                    </div>


                    <div class="d-flex
                                justify-content-between
                                mb-3">

                        <span class="text-muted">
                            Cancelled Orders
                        </span>

                        <strong>
                            1
                        </strong>

                    </div>


                    <div class="d-flex
                                justify-content-between
                                mb-3">

                        <span class="text-muted">
                            Returned Orders
                        </span>

                        <strong>
                            1
                        </strong>

                    </div>


                    <hr>


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

                        <strong>
                            Total Spent
                        </strong>

                        <strong class="text-primary fs-5">
                            ₹75,500
                        </strong>

                    </div>

                </div>

            </div>



            {{-- ================================================= --}}
            {{-- CUSTOMER STATUS --}}
            {{-- ================================================= --}}

            <div class="card shadow-sm border-0 mb-4">

                <div class="card-body p-4">

                    <h6 class="fw-bold mb-4">
                        Account Information
                    </h6>


                    <div class="mb-3">

                        <small class="text-muted d-block mb-1">
                            Account Status
                        </small>

                        <span class="badge bg-success">
                            Active
                        </span>

                    </div>


                    <div class="mb-3">

                        <small class="text-muted d-block mb-1">
                            Registered On
                        </small>

                        <strong>
                            10 Aug 2026
                        </strong>

                    </div>


                    <div>

                        <small class="text-muted d-block mb-1">
                            Last Order
                        </small>

                        <strong>
                            18 Aug 2026
                        </strong>

                    </div>

                </div>

            </div>



            {{-- ================================================= --}}
            {{-- CONTACT INFORMATION --}}
            {{-- ================================================= --}}

            <div class="card shadow-sm border-0 mb-4">

                <div class="card-body p-4">

                    <h6 class="fw-bold mb-4">
                        Contact Information
                    </h6>


                    <div class="d-flex align-items-center mb-3">

                        <div class="bg-primary-subtle
                                    rounded-circle
                                    p-2
                                    me-3">

                            <i class="fa-solid fa-envelope text-primary"></i>

                        </div>

                        <div>

                            <small class="text-muted d-block">
                                Email
                            </small>

                            <strong>
                                Aurela@gmail.com
                            </strong>

                        </div>

                    </div>


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

                        <div class="bg-primary-subtle
                                    rounded-circle
                                    p-2
                                    me-3">

                            <i class="fa-solid fa-phone text-primary"></i>

                        </div>

                        <div>

                            <small class="text-muted d-block">
                                Phone
                            </small>

                            <strong>
                                9876543210
                            </strong>

                        </div>

                    </div>

                </div>

            </div>


        </div>

    </div>

</div>

@endsection