@extends('template.layouts.template-base')
@section('title', 'Customer - Details')

@section('styles')
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
  <style>
    .page-content {
      background-color: #F1F5F9 !important;
      padding: 80px 10px;
    }
  </style>
@endsection

@section('content')
  <div class="order-detail-page ">
    <div class="header">
      <div class="container">
        <div class="row align-items-center">
          <div class="col">
            <div class="page-title">
              <a href="{{ route('backend.customers.index') }}"> Customers/ <span class="breadcrumb-link">Customer
                  Detail</span></a>
            </div>
          </div>
          <div class="col-md-6 text-end d-flex justify-content-end gap-2">
            <div class="lang-wrapper">
              <button class="lang-trigger" id="langBtn">
                <span id="langSelected">English</span>
                <i class="ri-arrow-down-s-fill"></i>
              </button>
              <ul class="lang-list" id="langMenu">
                <li class="current">English</li>
                <li>Tamil</li>
              </ul>
            </div>
            <button class="btn print-btn show-toast" data-toast-target="#sentSuccessToast">
              <img src="{{ asset('assets/template/images/printer-1.png') }}" alt="Cattle Feed" class="printer-img" />
              Print Invoice
            </button>
            <button class="btn download-button show-toast" data-toast-target="#downloadSuccessToast">
              <img src="{{ asset('assets/template/images/file-pdf-2.png') }}" alt="Cattle Feed"
                class="file-pdf-img me-2" />Download Invoice
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="container mt-4">
      <div class="row">
        <div class="col-md-4 customer-card-item">
          <!-- Customer Details -->
          <div class="customer-card">
            <div class="d-flex justify-content-between align-items-center mb-3 heading">
              <h5>Customer Details</h5>
              <button class="btn btn-primary btn-call">
                <i class="bx bxs-phone"></i> Call
              </button>
            </div>
            <div class="d-flex align-items-center justify-content-between">
              <div class="d-flex align-items-center">
                @if($customer->user?->image)
                  <img src="{{ asset('uploads/' .$customer->user?->image) }}" alt="{{ $customer->name }}" class="me-3 user-img-item" />
                @endif
                <div class="d-flex  flex-column">
                  <h6 class="mb-0">{{ $customer->user?->name }}</h6>
                  <small class="text-muted">{{ $customer->user?->mobile }}</small>
                </div>
              </div>
              <div class="play-wrapper">
                <span class="play-circle">
                  <i class="bx bxs-phone-call fs-5 "></i>
                </span>
              </div>
            </div>
          </div>
          {{-- Contact Information --}}
          <div class="customer-card">
              <h5 class="my-2">Contact Information</h5>
              @if($customer->user?->email)
                <p class="d-flex gap-2 loca-sec">
                    <i class="bx bxs-email fs-5 m-1"></i>
                    <span>{{ $customer->user->email}}</span>
                </p>
              @endif

              {{-- Fix #1 — check defaultAddress before accessing alternate_mobile --}}
              @if($customer->defaultAddress?->alternate_mobile)
                  <p class="d-flex gap-2 loca-sec">
                      <i class="bx bxs-phone-call fs-5 m-1"></i>
                      <span>{{ $customer->defaultAddress->alternate_mobile }}</span>
                  </p>
              @endif
          </div>

          {{-- Delivery Address --}}
          @if($customer->defaultAddress)
              <div class="customer-card">
                  <h5 class="my-2">Delivery Address</h5>
                  <p class="d-flex gap-2 loca-sec">
                      <i class="bx bxs-map fs-5 m-2"></i>
                      <span>
                          {{ $customer->defaultAddress->address_line_1 }}
                          @if($customer->defaultAddress->address_line_2)
                              , {{ $customer->defaultAddress->address_line_2 }}
                          @endif
                          <br/>
                          @if($customer->defaultAddress->panchayat)
                              {{ $customer->defaultAddress->panchayat }},
                          @endif
                          @if($customer->defaultAddress->taluk)
                              {{ $customer->defaultAddress->taluk }},
                          @endif
                          @if($customer->defaultAddress->district)
                              {{ $customer->defaultAddress->district }}
                          @endif
                          @if($customer->defaultAddress->pincode)
                              - {{ $customer->defaultAddress->pincode }}.
                          @endif
                          
                      </span>
                  </p>
                  <div class="d-flex align-items-center map-sec">
                      <span>
                          <img src="{{ asset('assets/template/images/map.png') }}"
                              alt="Map" class="mx-3 map-item" />
                      </span>
                      @if($customer->defaultAddress->latitude && $customer->defaultAddress->longitude)
                          <a href="https://maps.google.com/?q={{ $customer->defaultAddress->latitude }},{{ $customer->defaultAddress->longitude }}"
                            target="_blank" class="text-primary d-flex">
                              View Map
                          </a>
                      @else
                          <a href="#" class="text-primary d-flex">View Map</a>
                      @endif
                  </div>
              </div>
          @else
            <div class="customer-card">
                <h5 class="my-2">Delivery Address</h5>
                <p class="text-muted">No address added yet.</p>
            </div>
          @endif

          {{-- Billing Address --}}
          @php
            $billingAddress = $customer->addresses->where('address_type', 'billing')->first();
          @endphp

          <div class="customer-card">
              <h5 class="my-2">Billing Address</h5>

              @if($billingAddress)
                  <p class="d-flex gap-2 loca-sec">
                      <i class="bx bxs-map fs-5 m-2"></i>
                      <span>
                          {{ $billingAddress->address_line_1 }}
                          @if($billingAddress->address_line_2)
                              , {{ $billingAddress->address_line_2 }}
                          @endif
                          <br/>
                          @if($billingAddress->panchayat)
                              {{ $billingAddress->panchayat }},
                          @endif
                          @if($billingAddress->taluk)
                              {{ $billingAddress->taluk }},
                          @endif
                          @if($billingAddress->district)
                              {{ $billingAddress->district }}
                          @endif
                          @if($billingAddress->pincode)
                              - {{ $billingAddress->pincode }}.
                          @endif
                      </span>
                  </p>
                  <div class="d-flex align-items-center map-sec">
                      <span>
                          <img src="{{ asset('assets/template/images/map.png') }}"
                              alt="Map" class="mx-3 map-item" />
                      </span>
                      <a href="#" class="text-primary d-flex">View Map</a>
                  </div>
              @else
                  <p class="text-muted">Same as delivery address.</p>
              @endif
          </div>
          
          <div class="customer-card">
            <div class="cattle-card">

              <h6>Cattle Details</h6>

              <div class="cattle-row">
                <img src="{{ asset('assets/template/images/cow.png') }}" alt="Customer" class="mx-1 map-item" />
                <span>Cow</span>
                <strong>{{ $customer->cow_count ?? 0 }}</strong>
              </div>

              <div class="cattle-row">
                <img src="{{ asset('assets/template/images/Buffalo.png') }}" alt="Customer" class="mx-1 map-item" />
                <span>Buffalo</span>
                <strong>{{ $customer->buffalo_count ?? 0 }}</strong>
              </div>

              <div class="cattle-row">
                <img src="{{ asset('assets/template/images/Goat.png') }}" alt="Customer" class="mx-1 map-item" />
                <span>Goat</span>
                <strong>{{ $customer->goat_count ?? 0 }}</strong>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-8 customer-detail-sec">
          <div class="swiper myStatsSwiper">
            <div class="swiper-wrapper">

                <div class="swiper-slide">
                    <div class="stat-card custo-sec-blue">
                        <div class="stat-left">
                            <h6>Total Sales</h6>
                            <h4>₹{{ number_format($stats['total_sales'], 2) }}</h4>
                        </div>
                        <div class="stat-icon">
                            <i class="bx bx-rupee fs-3"></i>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="stat-card custo-sec-orange">
                        <div class="stat-left">
                            <h6>Total Orders</h6>
                            <h4>{{ $stats['total_orders'] }}</h4>
                        </div>
                        <div class="stat-icon">
                            <i class="bx bxs-shopping-bag fs-3"></i>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="stat-card custo-sec-lightblue">
                        <div class="stat-left">
                            <h6>Delivered</h6>
                            <h4>{{ $stats['delivered'] }}</h4>
                        </div>
                        <div class="stat-icon">
                            <i class="bx bx-cube fs-3"></i>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="stat-card custo-sec-green">
                        <div class="stat-left">
                            <h6>In Progress</h6>
                            <h4>{{ $stats['in_progress'] }}</h4>
                        </div>
                        <div class="stat-icon">
                            <i class="bx bxs-truck fs-3"></i>
                        </div>
                    </div>
                </div>

            </div>
          </div>
          <div class="customer-order-table">

            {{-- Orders Tab --}}
            <div id="allOrdersPage" class="tab-content-section active">
                <div class="container order-table-sec">

                    <div class="row order-filer-sec align-items-center">
                        <div class="col-md-7">
                            <div class="tab-filters">
                                <button type="button" class="tab-btn active" data-tab="allOrdersPage">
                                    Orders - {{ $orders_count }}
                                </button>
                                <button type="button" class="tab-btn" data-tab="paymentOrdersPage">
                                    Payments - {{ $payments_count }}
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="orders-table">
                        <table id="customerOrdersTable" class="table mb-0">
                            <thead class="customer-table-head">
                                <tr>
                                    <th><input type="checkbox" class="select-all" /></th>
                                    <th>Order ID</th>
                                    <th>Quantity</th>
                                    <th>Order Date</th>
                                    <th>Total Amount</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>

                </div>
            </div>

            {{-- Payments Tab --}}
            <div id="paymentOrdersPage" class="tab-content-section" style="display:none;">
                <div class="container order-table-sec">

                    <div class="row order-filer-sec align-items-center">
                        <div class="col-md-7">
                            <div class="tab-filters">
                                <button type="button" class="tab-btn" data-tab="allOrdersPage">
                                    Orders - {{ $orders_count }}
                                </button>
                                <button type="button" class="tab-btn active" data-tab="paymentOrdersPage">
                                    Payments - {{ $payments_count }}
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="orders-table">
                        <table id="customerPaymentsTable" class="table mb-0">
                            <thead class="customer-table-head">
                                <tr>
                                    <th><input type="checkbox" class="select-all" /></th>
                                    <th>Order ID</th>
                                    <th>Method</th>
                                    <th>Paid Date</th>
                                    <th>Total Amount</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>

                </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
    <div id="statusUpdatedToast" class="toast login-success-toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-body d-flex align-items-center gap-3">
        <div class="toast-left">
          <div class="check-circle">
            ✓
          </div>
        </div>
        <div class="toast-right">
          <h6>Status updated successfully</h6>
        </div>
      </div>
    </div>
  </div>
  <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
    <div id="sentSuccessToast" class="toast login-success-toast" role="alert" aria-live="assertive" aria-atomic="true">

      <div class="toast-body d-flex align-items-center gap-3">
        <div class="toast-left">
          <div class="check-circle">
            ✓
          </div>
        </div>
        <div class="toast-right">
          <h6>Sent Successful</h6>
          <p>Invoice has been sent successfully</p>
        </div>
      </div>
    </div>
  </div>
  <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
    <div id="downloadSuccessToast" class="toast login-success-toast" role="alert" aria-live="assertive"
      aria-atomic="true">
      <div class="toast-body d-flex align-items-center gap-3">
        <div class="toast-left">
          <div class="check-circle">
            ✓
          </div>
        </div>
        <div class="toast-right">
          <h6>Download Successful</h6>
          <p>The invoice has been downloaded successfully</p>
        </div>
      </div>
    </div>
  </div>

  <div class="offcanvas offcanvas-end customer-detail" tabindex="-1" id="addCategoryOffcanvas" style="width: 500px;">
    <button type="button" class="offcanvas-left-close" data-bs-dismiss="offcanvas" aria-label="Close">✕</button>
    <div class="offcanvas-header d-flex justify-content-between align-items-center border-bottom pb-2">
      <h5 class="offcanvas-title">Payment Details</h5>
      <span class="badge custo-sec-green px-3 py-2">Delivered</span>
    </div>
    <div class="offcanvas-body">
      <form id="addCategoryForm" action="javascript:void(0);" enctype="multipart/form-data">
        <div class="container">

          <!-- Payment Details -->

          <div class=" mb-4">



            <h6 class="mt-3 offcanvas-title">Order Details</h6>

            <div class="row mt-3">

              <div class="col-md-3 mb-3">
                <small class="offcanvas-small">Order ID</small>
                <div class="fw-semibold">#2345678678</div>
              </div>

              <div class="col-md-3 mb-3">
                <small class="offcanvas-small">Quantity</small>
                <div class="fw-semibold">3 Items</div>
              </div>

              <div class="col-md-3 mb-3">
                <small class="offcanvas-small">Total Kgs</small>
                <div class="fw-semibold">100kg</div>
              </div>

              <div class="col-md-3 mb-3">
                <small class="offcanvas-small">Ordered Date</small>
                <div class="fw-semibold">09 Jan 2026</div>
              </div>

              <div class="col-md-3 mb-3">
                <small class="offcanvas-small">Paid Date</small>
                <div class="fw-semibold">09 Jan 2026</div>
              </div>

              <div class="col-md-3 mb-3">
                <small class="offcanvas-small">Payment Method</small>
                <div class="fw-semibold">UPI</div>
              </div>

            </div>

          </div>

          <!-- Payment Summary -->

          <div class="">

            <div class="d-flex justify-content-between align-items-center border-bottom pb-2">
              <h6 class="offcanvas-title">Payment Summary</h6>
              <span class="badge custo-sec-green  px-3 py-2">Paid</span>
            </div>

            <div class="mt-3">

              <div class="d-flex customer-payment justify-content-between mb-3">
                <span>Subtotal</span>
                <span>₹0000</span>
              </div>

              <div class="d-flex customer-payment justify-content-between mb-3">
                <span>Discount (10%)</span>
                <span>₹0000</span>
              </div>

              <div class="d-flex customer-payment justify-content-between mb-3">
                <span>Shipping Cost</span>
                <span>₹0000</span>
              </div>

              <div class="d-flex customer-payment justify-content-between mb-3">
                <span>Tax (08%)</span>
                <span>₹0000</span>
              </div>

              <hr>

              <div class="d-flex  customer-payment justify-content-between ">
                <span class="fw-bold">Total</span>
                <span class="blue-text">₹0000</span>
              </div>

            </div>

          </div>

        </div>


        <div class="d-flex justify-content-end gap-4 mb-2  offcan-btn">
          <button class="btn download-button">
            <img src="{{ asset('assets/template/images/file-pdf-1.png') }}" alt="Cattle Feed" class="file-pdf-img" />
            Download Invoice
          </button>
          <button class="btn print-btn">
            <img src="{{ asset('assets/template/images/printer-1.png') }}" alt="Cattle Feed" class="printer-img" />
            </a> Print Invoice
          </button>
        </div>
      </form>
    </div>
  </div>

@endsection

@section('scripts')
  <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
  <script>
    new Swiper(".myStatsSwiper", {
      slidesPerView: "auto",
      spaceBetween: 15,
      freeMode: true,
    });
  </script>
  <script>
    document.querySelectorAll('.dropdown-menu-custom li').forEach(item => {

      item.addEventListener('click', function () {

        const dropdown = this.closest('.custom-dropdown');
        const btn = dropdown.querySelector('.dropdown-btn');

        // Remove active from all options
        dropdown.querySelectorAll('li').forEach(li => {
          li.classList.remove('active');
          li.style.background = '';
        });

        // Apply selected
        this.classList.add('active');

        const color = this.dataset.color;

        this.style.background = color;
        btn.style.background = color;

        btn.childNodes[0].textContent = this.textContent;

      });

    });

  </script>
  <script>
    const wrapper = document.querySelector('.lang-wrapper');
    const btn = document.getElementById('langBtn');
    const menu = document.getElementById('langMenu');
    const selected = document.getElementById('langSelected');

    btn.addEventListener('click', () => {
      wrapper.classList.toggle('open');
    });

    menu.querySelectorAll('li').forEach(item => {
      item.addEventListener('click', () => {
        selected.textContent = item.textContent;

        menu.querySelectorAll('li').forEach(li => li.classList.remove('current'));
        item.classList.add('current');

        wrapper.classList.remove('open');
      });
    });

    // Close outside
    document.addEventListener('click', e => {
      if (!wrapper.contains(e.target)) {
        wrapper.classList.remove('open');
      }
    });
  </script>
  <script>

    const box = document.querySelector(".pay-wrap");
    const button = box.querySelector(".pay-toggle");
    const options = box.querySelectorAll("li");

    // open close
    button.onclick = () => {
      box.classList.toggle("opened");
    };

    // select
    options.forEach(item => {

      item.onclick = () => {

        const color = item.dataset.bg;

        // text
        button.childNodes[0].nodeValue = item.textContent + " ";

        // background
        button.style.background = color;

        // active
        options.forEach(o => o.classList.remove("current"));
        item.classList.add("current");

        box.classList.remove("opened");
      };

    });

    // outside click
    document.addEventListener("click", e => {
      if (!box.contains(e.target)) {
        box.classList.remove("opened");
      }
    });

  </script>
  <script>
    const tabBtns = document.querySelectorAll(".tab-btn");
    const tabSections = document.querySelectorAll(".tab-content-section");

    tabBtns.forEach((btn) => {
      btn.addEventListener("click", function (e) {
        // e.preventDefault();

        tabBtns.forEach((b) => b.classList.remove("active"));
        tabSections.forEach((s) => s.classList.remove("active"));


        this.classList.add("active");

        const targetId = this.getAttribute("data-tab");
        document.getElementById(targetId).classList.add("active");
      });
    });
  </script>
  <script>
  $(function () {

    var customerId = {{ $customer->id }};

    // Orders DataTable — initialize immediately (visible by default)
    var ordersTable = $('#customerOrdersTable').DataTable({
        processing: true,
        serverSide: true,
        ordering:   false,
        ajax: {
            url: '{{ route("backend.customers.orders", $customer->id) }}',
        },
        columns: [
            { data: 'checkbox',      orderable: false, searchable: false },
            { data: 'order_number',  name: 'order_number' },
            { data: 'quantity',      name: 'quantity' },
            { data: 'order_date',    name: 'created_at' },
            { data: 'total_amount',  name: 'total_amount' },
            { data: 'order_status',  name: 'order_status' },
            { data: 'action',        orderable: false, searchable: false },
        ]
    });

    // Payments DataTable — initialize as null, create when tab clicked
    var paymentsTable = null;

    // Tab switching
    $(document).on('click', '.tab-btn', function () {
        var target = $(this).data('tab');

        $('.tab-content-section').hide();
        $('#' + target).show();

        $('.tab-btn').removeClass('active');
        $('[data-tab="' + target + '"]').addClass('active');

        if (target === 'allOrdersPage') {
            ordersTable.ajax.reload();

        } else if (target === 'paymentOrdersPage') {

            // Initialize payments table only when tab is first shown
            if (!paymentsTable) {
                paymentsTable = $('#customerPaymentsTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ordering:   false,
                    ajax: {
                        url: '{{ route("backend.customers.payments", $customer->id) }}',
                    },
                    columns: [
                        { data: 'checkbox',        orderable: false, searchable: false },
                        { data: 'order_number',    name: 'order_number' },
                        { data: 'method',          name: 'method' },
                        { data: 'paid_date',       name: 'updated_at' },
                        { data: 'total_amount',    name: 'total_amount' },
                        { data: 'payment_status',  name: 'payment_status' },
                        { data: 'action',          orderable: false, searchable: false },
                    ]
                });
            } else {
                // Already initialized — just reload
                paymentsTable.ajax.reload();
            }
        }
    });

  });
  </script>
@endsection