@extends('layouts.app')
 @section('title', 'Bangladesh Unbound - Request Details')
 @section('page-title', 'Service Request Details')
 @push('styles')
     <style>
         .info-card {
             background: #fff;
             border-radius: 12px;
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
             border: 1px solid #e9ecef;
             height: 100%;
         }

         .info-card-header {
             padding: 20px 24px 0;
             border-bottom: 1px solid #e9ecef;
             margin-bottom: 20px;
         }

         .info-card-title {
             font-size: 18px;
             font-weight: 600;
             color: #2c3e50;
             margin: 0 0 20px 0;
             display: flex;
             align-items: center;
             gap: 10px;
         }

         .info-icon {
             width: 20px;
             height: 20px;
         }

         .info-card-body {
             padding: 0 24px 24px;
         }

         .info-row {
             display: flex;
             justify-content: space-between;
             align-items: center;
             padding: 12px 0;
             border-bottom: 1px solid #f8f9fa;
         }

         .info-row:last-child {
             border-bottom: none;
         }

         .info-label {
             font-weight: 500;
             color: #6c757d;
             flex: 0 0 40%;
         }

         .info-value {
             color: #2c3e50;
             font-weight: 500;
             text-align: right;
         }

         .payment-amount {
             font-size: 18px;
             font-weight: 600;
             color: #28a745;
         }

         .customer-profile {
             display: flex;
             align-items: center;
             gap: 15px;
             padding: 15px;
             background: #f8f9fa;
             border-radius: 8px;
         }

         .customer-avatar {
             width: 60px;
             height: 60px;
             border-radius: 50%;
             object-fit: cover;
         }

         .customer-name {
             margin: 0;
             font-size: 18px;
             font-weight: 600;
             color: #2c3e50;
         }

         .customer-location {
             margin: 0;
             color: #6c757d;
             font-size: 14px;
         }

         .service-item {
             display: flex;
             align-items: center;
             gap: 10px;
             padding: 8px 0;
             font-weight: 500;
         }

         .customer-message {
             background: #f8f9fa;
             padding: 20px;
             border-radius: 8px;
             border-left: 4px solid #0C8040;
         }

         .customer-message p {
             margin-bottom: 15px;
             line-height: 1.6;
             color: #2c3e50;
         }

         .customer-message p:last-child {
             margin-bottom: 0;
         }

         .action-buttons-container {
             text-align: center;
             padding: 30px 0;
             background: #f8f9fa;
             border-radius: 12px;
             margin-bottom: 30px;
         }

         .header-actions .btn {
             font-weight: 500;
         }

         .request-details-header {
             background: #fff;
             padding: 20px;
             border-radius: 12px;
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
             border: 1px solid #e9ecef;
         }
     </style>
 @endpush
 @section('breadcrumb')
     <!-- Breadcrumb Navigation -->
     <nav class="breadcrumb-container" aria-label="breadcrumb" class="mb-4">
         <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="{{ route('admin.dashboard') }}">
                     <img src="{{ asset('backend/img/ico/ico-dashboard.svg') }}" alt="Dashboard" class="breadcrumb-icon">
                     Dashboard
                 </a>
             </li>
             <li class="breadcrumb-item active" aria-current="page">
                 <img src="{{ asset('backend/img/ico/ico-custom.svg') }}" alt="Request Details" class="breadcrumb-icon">
                 Service Request Details
             </li>
         </ol>
     </nav>
 @endsection
 @section('content')
     <!-- Request Details Header -->
     <div class="mb-4 request-details-header">
         <div class="d-flex align-items-center justify-content-between">
             <h3 class="mb-0 section-title">
                 <img src="{{ asset('backend/img/ico/ico-custom.svg') }}" alt="Request Details" class="section-icon">
                 Service Request Details
             </h3>
             <div class="header-actions">
                 <a href="{{ route('admin.dashboard') }}" class="btn btn-secondary">
                     <i class="bi bi-arrow-left"></i> Back to Dashboard
                 </a>
             </div>
         </div>
     </div>
    <div class="m-0 row">
        <div class="p-0 bg-transparent border-0 border-none shadow-sm card rounded-4">
            @include('customer.service_requests.partials.view-form')
        </div> <!-- /.content -->
    @endsection