@extends('Admin.layout')

@section('content')

<div class="row align-items-center justify-content-between mb-3 mt-3">
    <div class="col-auto">
        <h5>
            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('admin.delivery_management')  }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-tabler">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a>
            </button>
            View Delivery partner
        </h5>
    </div>
</div>

    <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
                        gap-4">


                {{-- PROFILE IMAGE --}}
                <div>

                    <img src="{{ asset('assets/img/user.png') }}"
                         alt="Delivery Partner"
                         width="100"
                         height="100"
                         class="rounded-circle border object-fit-cover">

                </div>


                {{-- BASIC DETAILS --}}
                <div class="flex-grow-1">

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

                        <div>

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

                            <div class="text-muted mb-2">
                                Delivery Partner ID: DP1001
                            </div>

                            <div class="text-muted">

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

                                <span class="mx-2">|</span>

                                <i class="fa-solid fa-envelope me-2"></i>
                                raj@gmail.com

                            </div>

                        </div>


                        <div>

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

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>



    {{-- ========================================================= --}}
    {{-- DELIVERY STATISTICS --}}
    {{-- ========================================================= --}}

    <div class="row g-4 mb-4">


        {{-- TOTAL DELIVERIES --}}
        <div class="col-sm-6 col-lg-3">

            <div class="card shadow-sm border-0 h-100">

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

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

                        <div>

                            <small class="text-muted d-block mb-2">
                                Total Deliveries
                            </small>

                            <h4 class="fw-bold mb-0">
                                145
                            </h4>

                        </div>

                        <div class="rounded-circle
                                    bg-primary
                                    bg-opacity-10
                                    p-3">

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

                        </div>

                    </div>

                </div>

            </div>

        </div>


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

            <div class="card shadow-sm border-0 h-100">

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

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

                        <div>

                            <small class="text-muted d-block mb-2">
                                Completed
                            </small>

                            <h4 class="fw-bold mb-0">
                                132
                            </h4>

                        </div>

                        <div class="rounded-circle
                                    bg-success
                                    bg-opacity-10
                                    p-3">

                            <i class="fa-solid fa-circle-check
                                      text-success"></i>

                        </div>

                    </div>

                </div>

            </div>

        </div>


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

            <div class="card shadow-sm border-0 h-100">

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

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

                        <div>

                            <small class="text-muted d-block mb-2">
                                Pending
                            </small>

                            <h4 class="fw-bold mb-0">
                                8
                            </h4>

                        </div>

                        <div class="rounded-circle
                                    bg-warning
                                    bg-opacity-10
                                    p-3">

                            <i class="fa-solid fa-clock
                                      text-warning"></i>

                        </div>

                    </div>

                </div>

            </div>

        </div>


        {{-- CANCELLED --}}
        <div class="col-sm-6 col-lg-3">

            <div class="card shadow-sm border-0 h-100">

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

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

                        <div>

                            <small class="text-muted d-block mb-2">
                                Cancelled
                            </small>

                            <h4 class="fw-bold mb-0">
                                5
                            </h4>

                        </div>

                        <div class="rounded-circle
                                    bg-danger
                                    bg-opacity-10
                                    p-3">

                            <i class="fa-solid fa-circle-xmark
                                      text-danger"></i>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>



    <div class="row g-4">


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

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


            {{-- ================================================= --}}
            {{-- PERSONAL INFORMATION --}}
            {{-- ================================================= --}}

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

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

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


                    <div class="row g-4">


                        <div class="col-md-6">

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

                            <strong>
                                Raj Kumar
                            </strong>

                        </div>


                        <div class="col-md-6">

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

                            <strong>
                                9876543210
                            </strong>

                        </div>


                        <div class="col-md-6">

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

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

                        </div>


                        <div class="col-md-6">

                            <small class="text-muted d-block mb-1">
                                Date of Birth
                            </small>

                            <strong>
                                15 May 1998
                            </strong>

                        </div>


                        <div class="col-12">

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

                            <strong>
                                12, Anna Nagar, Chennai,
                                Tamil Nadu - 600001
                            </strong>

                        </div>

                    </div>

                </div>

            </div>



            {{-- ================================================= --}}
            {{-- VEHICLE INFORMATION --}}
            {{-- ================================================= --}}

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

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

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


                    <div class="row g-4">


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

                            <small class="text-muted d-block mb-1">
                                Vehicle Type
                            </small>

                            <strong>
                                Bike
                            </strong>

                        </div>


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

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

                            <strong>
                                TN 01 AB 1234
                            </strong>

                        </div>


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

                            <small class="text-muted d-block mb-1">
                                Driving License
                            </small>

                            <strong>
                                TN0120260012345
                            </strong>

                        </div>

                    </div>

                </div>

            </div>



            {{-- ================================================= --}}
            {{-- DOCUMENTS --}}
            {{-- ================================================= --}}

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

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

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


                    <div class="row g-4">


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

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

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

                                    <div>

                                        <small class="text-muted d-block mb-1">
                                            Profile Photo
                                        </small>

                                        <strong>
                                            profile_photo.jpg
                                        </strong>

                                    </div>


                                    <button type="button"
                                            class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#filePreviewModal">

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

                                    </button>

                                </div>

                            </div>

                        </div>


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

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

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

                                    <div>

                                        <small class="text-muted d-block mb-1">
                                            Driving License
                                        </small>

                                        <strong>
                                            driving_license.pdf
                                        </strong>

                                    </div>


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

                                        <button type="button"
                                                class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#filePreviewModal">

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

                                        </button>

                                    
                                    </div>

                                </div>

                            </div>

                        </div>


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

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

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

                                    <div>

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

                                        <strong>
                                            Aadhaar Card
                                        </strong>

                                    </div>


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

                                        <button type="button"
                                                class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#filePreviewModal">

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

                                        </button>

                                     

                                    </div>

                                </div>

                            </div>

                        </div>


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

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

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

                                    <div>

                                        <small class="text-muted d-block mb-1">
                                            Vehicle RC
                                        </small>

                                        <strong>
                                            vehicle_rc.pdf
                                        </strong>

                                    </div>


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

                                        <button type="button"
                                                class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#filePreviewModal">

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

                                        </button>

                                      

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>



            {{-- ================================================= --}}
            {{-- RECENT DELIVERIES --}}
            {{-- ================================================= --}}

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

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

                    <h6 class="fw-bold mb-4">
                        Recent Deliveries
                    </h6>


                    <div class="table-responsive">

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

                            <thead>

                                <tr>

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

                                </tr>

                            </thead>


                            <tbody>

                                <tr>

                                    <td>
                                        <strong>ORD1001</strong>
                                    </td>

                                    <td>
                                        Lunaa
                                    </td>

                                    <td>
                                        17 Aug 2026
                                    </td>

                                    <td>
                                        ₹35,048
                                    </td>

                                    <td>

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

                                    </td>

                                </tr>


                                <tr>

                                    <td>
                                        <strong>ORD0998</strong>
                                    </td>

                                    <td>
                                        Anitha
                                    </td>

                                    <td>
                                        16 Aug 2026
                                    </td>

                                    <td>
                                        ₹18,500
                                    </td>

                                    <td>

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

                                    </td>

                                </tr>


                                <tr>

                                    <td>
                                        <strong>ORD0994</strong>
                                    </td>

                                    <td>
                                        Priya
                                    </td>

                                    <td>
                                        15 Aug 2026
                                    </td>

                                    <td>
                                        ₹22,000
                                    </td>

                                    <td>

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

                                    </td>

                                </tr>

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>



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

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


            {{-- ================================================= --}}
            {{-- ACCOUNT INFORMATION --}}
            {{-- ================================================= --}}

            <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="d-flex
                                justify-content-between
                                mb-3">

                        <span class="text-muted">
                            Partner ID
                        </span>

                        <strong>
                            DP1001
                        </strong>

                    </div>


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

                        <span class="text-muted">
                            Joined On
                        </span>

                        <strong>
                            10 Jan 2026
                        </strong>

                    </div>


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

                        <span class="text-muted">
                            Status
                        </span>

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

                    </div>


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

                        <span class="text-muted">
                            Last Active
                        </span>

                        <strong>
                            Today, 10:25 AM
                        </strong>

                    </div>

                </div>

            </div>



            {{-- ================================================= --}}
            {{-- DELIVERY PERFORMANCE --}}
            {{-- ================================================= --}}

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

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

                    <h6 class="fw-bold mb-4">
                        Delivery Performance
                    </h6>


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

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

                        <strong>
                            132
                        </strong>

                    </div>


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

                        <span class="text-muted">
                            Pending Deliveries
                        </span>

                        <strong>
                            8
                        </strong>

                    </div>


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

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

                        <strong>
                            5
                        </strong>

                    </div>


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

                        <span class="text-muted">
                            Success Rate
                        </span>

                        <strong class="text-success">
                            91%
                        </strong>

                    </div>

                </div>

            </div>



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

            <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="rounded-circle
                                    bg-primary
                                    bg-opacity-10
                                    p-2 me-3">

                            <i class="ti tabler-phone text-primary"></i>

                        </div>

                        <div>

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

                            <strong>
                                9876543210
                            </strong>

                        </div>

                    </div>


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

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

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

                        </div>

                        <div>

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

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

                        </div>

                    </div>

                </div>

            </div>


        </div>

    </div>


@endsection