@extends('admin.layouts.app')

@section('title', 'Logistics Partner')

@section('style')
@endsection

@section('content')
<main class="dash-content logistis_partner">

    <div class="page-header">
        <div class="page-title">
        <h1>Logistics Partner</h1>
        <p>Choose and manage your shipping partners</p>
        </div>
        <div class="btn-group-top">
        <button class="btn-typ1">Compare All Partners</button>
        </div>
    </div>

    <div class="logistics_partner">
    <!-- ACTIVE PARTNERS -->
    <div class="section-card p-3">

        <h6 class="fw-bold mb-3">
            Active Partners
        </h6>

        <div class="row g-3">

            <div class="col-md-4">
                <div class="partner-card">
                    <div class="d-flex justify-content-between mb-2">
                        <div class="logo-box"></div>
                        <span class="status-active">Active</span>
                    </div>

                    <small class="fw-semibold d-block">
                        FedEx Express
                    </small>

                    <small class="text-muted">
                        156 shipments
                    </small>
                </div>
            </div>

            <div class="col-md-4">
                <div class="partner-card">
                    <div class="d-flex justify-content-between mb-2">
                        <div class="logo-box"></div>
                        <span class="status-active">Active</span>
                    </div>

                    <small class="fw-semibold d-block">
                        UPS Ground
                    </small>

                    <small class="text-muted">
                        89 shipments
                    </small>
                </div>
            </div>

            <div class="col-md-4">
                <div class="partner-card">
                    <div class="d-flex justify-content-between mb-2">
                        <div class="logo-box"></div>
                        <span class="status-active">Active</span>
                    </div>

                    <small class="fw-semibold d-block">
                        DHL International
                    </small>

                    <small class="text-muted">
                        34 shipments
                    </small>
                </div>
            </div>

        </div>

    </div>

    <!-- FILTERS -->

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

        <h6 class="fw-bold mb-2">
            Available Shipping Partners
        </h6>

        <div>
            <button class="btn-typ2 active"
                onclick="filterCarriers('all',this)">
                All Carriers
            </button>

            <button class="btn-typ1"
                onclick="filterCarriers('domestic',this)">
                Domestic
            </button>

            <button class="btn-typ1"
                onclick="filterCarriers('international',this)">
                International
            </button>
        </div>

    </div>

    <div id="carrierContainer"></div>

    </div>
</main>
@endsection

@section('script')
<script>
(function () {
      /* Revenue overview chart */
      const ctx = document.getElementById('revenueChart').getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['0', '1'],
          datasets: [
            { label: 'Series A', data: [25, 42], backgroundColor: '#AD46FF', borderRadius: 5, barPercentage: 0.55, categoryPercentage: 0.75 },
            { label: 'Series B', data: [38, 30], backgroundColor: '#77BD65', borderRadius: 5, barPercentage: 0.55, categoryPercentage: 0.75 },
            { label: 'Series C', data: [20, 47], backgroundColor: '#EB8F48', borderRadius: 5, barPercentage: 0.55, categoryPercentage: 0.75 },
            { label: 'Series D', data: [14, 28], backgroundColor: '#EABC49', borderRadius: 5, barPercentage: 0.55, categoryPercentage: 0.75 },
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: { legend: { display: false } },
          scales: {
            x: { grid: { display: false }, border: { display: false }, ticks: { color: '#8B929C', font: { family: 'Poppins', size: 12 } } },
            y: { grid: { color: '#F1F2F4' }, border: { display: false }, ticks: { stepSize: 15, color: '#8B929C', font: { family: 'Poppins', size: 12 } } }
          }
        }
      });

      /* Mobile sidebar */
      const hamburgerBtn = document.getElementById('hamburgerBtn');
      const dashSidebar = document.getElementById('dashSidebar');
      const sidebarOverlay = document.getElementById('sidebarOverlay');
      const sidebarClose = document.getElementById('sidebarClose');

      function openSidebar() {
        dashSidebar.classList.add('sidebar-open');
        sidebarOverlay.classList.add('overlay-active');
        hamburgerBtn.setAttribute('aria-expanded', 'true');
        document.body.classList.add('sidebar-is-open');
      }

      function closeSidebar() {
        dashSidebar.classList.remove('sidebar-open');
        sidebarOverlay.classList.remove('overlay-active');
        hamburgerBtn.setAttribute('aria-expanded', 'false');
        document.body.classList.remove('sidebar-is-open');
      }

      hamburgerBtn.addEventListener('click', openSidebar);
      sidebarClose.addEventListener('click', closeSidebar);
      sidebarOverlay.addEventListener('click', closeSidebar);

      document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') closeSidebar();
      });
    })();
  </script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="js/app.js"></script>
  <script>
    document.getElementById('addProductForm').addEventListener('submit', function (e) {
      e.preventDefault();
      alert('Product saved successfully!');
    });

    // Trigger file input click
    function triggerFileUpload(element) {
      const fileInput = element.nextElementSibling;
      fileInput.click();
    }

    // Preview image after upload
    function previewImage(fileInput) {
      const file = fileInput.files[0];
      if (file) {
        // Check file size (max 2MB)
        if (file.size > 2 * 1024 * 1024) {
          alert('File size should not exceed 2MB');
          return;
        }

        // Check file type
        if (!file.type.startsWith('image/')) {
          alert('Please select a valid image file');
          return;
        }

        // Create FileReader
        const reader = new FileReader();
        reader.onload = function (e) {
          const uploadBox = fileInput.previousElementSibling;

          // Remove existing content
          uploadBox.innerHTML = '';

          // Create and add image
          const img = document.createElement('img');
          img.src = e.target.result;
          img.style.cursor = 'pointer';
          img.title = 'Click to change image';

          uploadBox.appendChild(img);

          // Add click to change
          uploadBox.onclick = function () {
            if (confirm('Do you want to change this image?')) {
              triggerFileUpload(this);
            }
          };
        };
        reader.readAsDataURL(file);
      }
    }
  </script>
  
<script>

const carriers = [

{
    id:1,
    type:'domestic',
    name:'USPS Priority Mail',
    company:'United States Postal Service',
    delivery:'2-3 days',
    coverage:'Nationwide',
    tracking:'✓ Included',
    insurance:'Up to $100',
    price:'$7.99',
    recommended:true
},

{
    id:2,
    type:'international',
    name:'DHL Express',
    company:'DHL Worldwide',
    delivery:'1-4 days',
    coverage:'220 Countries',
    tracking:'✓ Included',
    insurance:'Up to $200',
    price:'$14.99',
    recommended:false
},

{
    id:3,
    type:'domestic',
    name:'UPS Ground',
    company:'United Parcel Service',
    delivery:'2-5 days',
    coverage:'Nationwide',
    tracking:'✓ Included',
    insurance:'Up to $100',
    price:'$9.50',
    recommended:true
}

];

function renderCarriers(list){

    const container =
        document.getElementById('carrierContainer');

    container.innerHTML='';

    list.forEach(carrier=>{

        container.innerHTML += `

<div class="shipping-card">
    <div class="carrier-header">
        <div class="carrier-left">
            <div class="carrier-logo"></div>
            <div class="full-inner">
                <div class="d-flex flex-wrap align-items-center gap-2 justify-content-between mb-2">
                    <div class="title-badge-full d-flex flex-wrap align-items-center gap-5">
                        <div class="fw-semibold d-grid">
                            ${carrier.name}
                            <small class="text-muted">
                                ${carrier.company}
                            </small>
                        </div>

                        ${
                            carrier.recommended
                            ? '<span class="recommended-badge">Recommended</span>'
                            : ''
                        }
                    </div>
                
                    <div class="carrier-price">
                        <small>Starting at</small>
                        <div class="price">
                            ${carrier.price}
                        </div>
                    </div>
                </div>

                
                 <div class="carrier-details py-3">
                    <div>
                        <small>Delivery Time</small>
                        <strong>${carrier.delivery}</strong>
                    </div>

                    <div>
                        <small>Coverage</small>
                        <strong>${carrier.coverage}</strong>
                    </div>

                    <div>
                        <small>Tracking</small>
                        <strong>${carrier.tracking}</strong>
                    </div>

                    <div>
                        <small>Insurance</small>
                        <strong>${carrier.insurance}</strong>
                    </div>
                </div>
                <div class="carrier-features align-items-center pb-3">
                <span class="">Features:</span>

                    <span class="wh-service purple">
                        Free Pickup
                    </span>

                    <span class="wh-service blue">
                        Real-time Tracking
                    </span>

                    <span class="wh-service green">
                        API Integration
                    </span>
                </div>
                <div class="carrier-actions">

                    <button class="btn-typ1"
                        onclick="viewRates('${carrier.name}')">
                        View Rates
                    </button>

                    <button class="btn-typ2"
                        onclick="setupCarrier('${carrier.name}')">
                        Setup Integration
                    </button>

                    <button class="btn-typ1"
                        onclick="learnMore('${carrier.name}')">
                        Learn More
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

        `;
    });
}

function filterCarriers(type,btn){

    document
        .querySelectorAll('.filter-btn')
        .forEach(x=>x.classList.remove('active'));

    btn.classList.add('active');

    if(type==='all'){
        renderCarriers(carriers);
        return;
    }

    renderCarriers(
        carriers.filter(x=>x.type===type)
    );
}

function viewRates(name){
    alert('Viewing rates for ' + name);
}

function setupCarrier(name){
    alert('Setup integration for ' + name);
}

function learnMore(name){
    alert('Learn more about ' + name);
}

renderCarriers(carriers);
</script>
@endsection