@extends('web.layouts.app')

@section('title', 'عنوان الشحن')
@section('styles')
<style>
    :root {
      --main-color: #f74e36;
      --main-color-hover: #e63e28;
    }
    
    .modal-content {
      border-radius: 1rem;
      border: none;
    }
    
    .custom-header {
      background-color: var(--main-color);
      color: white;
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
      padding: 1rem 1.5rem;
    }
    
    .form-control {
      border-radius: 0.5rem;
      border: 1px solid #ced4da;
      transition: all 0.3s ease;
      padding: 0.6rem 1rem;
    }
    
    .form-control:focus {
      border-color: var(--main-color);
      box-shadow: 0 0 0 0.2rem rgba(247, 78, 54, 0.25);
    }
    
    .custom-select {
      border-radius: 0.5rem;
      height: calc(1.5em + 1.2rem + 2px);
    }
    
    .btn {
      border-radius: 0.5rem;
      padding: 0.6rem 2rem;
      font-weight: 600;
      transition: all 0.3s ease;
    }
    
    .custom-btn {
      background-color: var(--main-color);
      color: white;
      border: none;
    }
    
    .custom-btn:hover {
      background-color: var(--main-color-hover);
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    /* تصميم جديد لزر التعيين كافتراضي */
    .default-address-container {
      background: #f8f9fa;
      padding: 1rem;
      border-radius: 0.5rem;
      margin-top: 1rem;
    }
    
    .default-address-checkbox {
      display: none;
    }
    
    .default-address-label {
      display: flex;
      align-items: center;
      cursor: pointer;
      margin: 0;
    }
    
    .default-address-switch {
      position: relative;
      width: 50px;
      height: 26px;
      background: #e2e2e2;
      border-radius: 13px;
      transition: all 0.3s ease;
      margin-left: 10px;
    }
    
    .default-address-switch:before {
      content: '';
      position: absolute;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: white;
      top: 2px;
      left: 2px;
      transition: all 0.3s ease;
    }
    
    .default-address-checkbox:checked + .default-address-label .default-address-switch {
      background: var(--main-color);
    }
    
    .default-address-checkbox:checked + .default-address-label .default-address-switch:before {
      transform: translateX(24px);
    }
    
    .default-address-text {
      font-weight: 600;
      color: #495057;
    }
    
    /* تحسينات إضافية */
    label {
      color: #495057;
      margin-bottom: 0.5rem;
    }
    
    .invalid-feedback {
      font-size: 0.85rem;
    }
    
    textarea {
      resize: none;
    }
    
    .close {
      opacity: 0.8;
      text-shadow: none;
      transition: all 0.3s ease;
    }
    
    .close:hover {
      opacity: 1;
      transform: scale(1.1);
    }
</style>

<style>
    .billing-info {
        background: #fff;
        padding: 1.5rem;
        border: 1px solid #eee;
    }
    
    .bill-box-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #eee;
    }
    
    .add-address-btn {
        display: inline-flex;
        align-items: center;
        color: #f74e36;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.3s ease;
    }
    
    .add-address-btn:hover {
        color: #e63e28;
        text-decoration: none;
        transform: translateY(-1px);
    }
    
    .address-grid {
        display: grid;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .address-card {
        position: relative;
    }
    
    .address-card input[type="radio"] {
        display: none;
    }
    
    .address-label {
        display: block;
        padding: 1rem;
        border: 1px solid #ddd;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: all 0.3s ease;
        margin: 0;
    }
    
    .address-card input[type="radio"]:checked + .address-label {
        border-color: #f74e36;
        background-color: #fff9f8;
        box-shadow: 0 2px 8px rgba(247, 78, 54, 0.1);
    }
    
    .address-type {
        display: flex;
        align-items: center;
        font-weight: 600;
        color: #f74e36;
        margin-bottom: 0.5rem;
    }
    
    .address-details {
        color: #666;
    }
    
    .address-text {
        margin-bottom: 0.5rem;
        line-height: 1.5;
    }
    
    .phone-numbers {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .phone {
        display: flex;
        align-items: center;
        margin: 0;
        color: #777;
        font-size: 0.9rem;
    }
    
    .shipping-company-section {
        margin-bottom: 1.5rem;
        padding: 1rem;
        background: #f8f9fa;
        border-radius: 0.5rem;
    }
    
    .shipping-label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: #444;
    }
    
    .custom-select {
        border-radius: 0.5rem;
        border: 1px solid #ddd;
        padding: 0.5rem 1rem;
        width: 100%;
    }
    
    .submit-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0.75rem;
        background-color: #f74e36;
        color: white;
        border: none;
        border-radius: 0.5rem;
        font-weight: 600;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .submit-btn:hover {
        background-color: #e63e28;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    @media (min-width: 768px) {
        .address-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
</style>   
@endsection

@section('content')

    
<div class="content">

    <div class="checkout-page">
        <div class="container">

            <div class="checkout">
                <h6>إتمام الطلب</h6>

                <div class="section-padding">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-lg-8">
                                <div class="steps steps-sm">
                                    <ul class="row">
                                        <li class="col active">
                                            <a href="{{ route('cart') }}">
                                                <span class="step-item" data-text="السلة"><span>1</span></span>
                                            </a>
                                        </li>
                                        <li class="col current">
                                            <a href="{{ route('checkout.address') }}">
                                                <span class="step-item" data-text="الشحن"><span>2</span></span>
                                            </a>
                                        </li>
                                        <li class="col">
                                            <a href="{{ route('checkout.payment') }}">
                                                <span class="step-item" data-text="الدفع"><span>3</span></span>
                                            </a>
                                        </li>
                                        <li class="col">
                                            <a href="{{ route('checkout.complete') }}">
                                                <span class="step-item" data-text="إنهاء"><span>4</span></span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-5">
                        <div class="shop-cards">
                            @foreach ($cartItems as $item)
                                <div class="shop-card">
                                    <div class="dropdown-box-list-item">
                                        <div class="cart-item-preview">
                                            <a class="cart-item-preview-image" href="{{ route('products.details', $item->product->id) }}">
                                                <img src="{{ Storage::url($item->product->main_image) }}" alt="{{ $item->product->name }}">
                                            </a>
                                            <div class="cart-item-preview-text">
                                                {{ $item->product->category ? $item->product->category->name : 'قسم غير محدد' }}
                                            </div>
                                            <div class="cart-item-preview-title">
                                                {{ $item->product->name }}
                                            </div>
                                            <div class="cart-item-preview-price">
                                                <span>{{ $item->product->price }}<span class="q">x {{ $item->quantity }}</span><span class="highlighted">L.E</span></span>
                                            </div>
                                        </div>
                                        <div class="item-price">
                                            <h6>{{ $item->quantity * $item->price }}<span class="highlighted">L.E</span></h6>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        {{--  عرض ملخص الطلب  --}}
                        <div class="sidebar-box">
                            <div class="sidebar-box-content">
                                <div class="totals-line">
                                    <div class="totals-line-title">السلة ({{ $cartItems->count() }})</div>
                                    <div class="price-title-small" id="subtotal">{{ number_format($cartItems->sum(function ($item) { return $item->product ? $item->quantity * $item->product->price : 0; }), 2) }}<span class="currency">L.E</span></div>
                                </div>
                                <div class="totals-line">
                                    <div class="totals-line-title">مصاريف الشحن</div>
                                    <div class="price-title-small" id="shipping-cost-value">{{ $shippingCost }}<span class="currency">L.E</span></div>
                                </div>
                                @if ($cart && $cart->coupon)
                                    <div class="totals-line">
                                        <div class="totals-line-title">كود خصم: {{ $cart->coupon->code }}</div>
                                        <div class="price-title-small" id="discount-amount">
                                            @if ($cart->coupon->discount_type == 'percentage')
                                                {{ $cart->coupon->discount_value }}%
                                            @else
                                                {{ number_format($cart->coupon->discount_value, 2) }}<span class="currency">L.E</span>
                                            @endif
                                        </div>
                                    </div>
                                @endif
                                <div class="totals-line totals-line-bold">
                                    <div class="totals-line-title">الإجمالى</div>
                                    <div class="price-title-small" id="cart-total">{{ number_format($total, 2) }}<span class="currency">L.E</span></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-7">
                        <div class="billing-info shadow-sm rounded-lg">
                            <div class="bill-box">
                                <div class="bill-box-header">
                                    <div class="section-header-info">
                                        <h3 class="mb-0 text-dark">اختر عنوان الشحن</h3>
                                    </div>
                                    <a href="#" data-toggle="modal" data-target="#addAddressModal" class="add-address-btn">
                                        <i class="fa fa-plus ml-1"></i>
                                        إضافة عنوان جديد
                                    </a>
                                </div>
                                <div class="bill-box-container">
                                    <div class="saved-address">
                                        <form action="{{ route('checkout.payment') }}" method="POST">
                                            @csrf

                                            @if($settings && ($settings->calculation_method === 'weight_based_by_company' || $settings->customer_can_choose_company))
                                                <div class="shipping-company-section">
                                                    <label for="shipping_company" class="shipping-label">شركة الشحن</label>
                                                    <select name="shipping_company_id" id="shipping_company" class="form-control custom-select">
                                                        <option value="" selected>اختر شركة الشحن</option>
                                                        @foreach($shippingCompanies as $company)
                                                        <option value="{{ $company->id }}" 
                                                                @if($company->id == $settings->default_shipping_company_id) selected @endif>
                                                            {{ $company->name }}
                                                        </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            @endif
                                            
                                            <div id="address-list" class="address-grid">
                                                @foreach ($addresses as $address)
                                                <div class="address-card">
                                                    <input type="radio" name="address_id" id="address-{{ $address->id }}" 
                                                           value="{{ $address->id }}" @if($address->id == $selectedAddressId) checked @endif>
                                                    <label for="address-{{ $address->id }}" class="address-label">
                                                        <div class="address-type">
                                                            <i class="fas @if($address->type == 'home') fa-home @else fa-building @endif ml-2"></i>
                                                            <span>
                                                                @if ($address->type == 'home')
                                                                    منزل
                                                                @else
                                                                    العمل
                                                                @endif
                                                            </span>
                                                        </div>
                                                        <div class="address-details">
                                                            <p class="address-text">{{ $address->address }}, {{ $address->city }}, {{ $address->governorate->name }}</p>
                                                            <div class="phone-numbers">
                                                                <p class="phone">
                                                                    <i class="fas fa-phone ml-1"></i>
                                                                    هاتف 1: {{ $address->phone_1 }}
                                                                    @if ($address->phone_2)
                                                                    | هاتف 2: {{ $address->phone_2 }}
                                                                    @endif
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </label>
                                                </div>
                                                @endforeach
                                            </div>
                    
                                            
                    
                                            <button type="submit" class="submit-btn">
                                                التالي
                                                <i class="fas fa-arrow-left mr-2"></i>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="addAddressModal" tabindex="-1" role="dialog" aria-labelledby="addAddressModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header custom-header">
          <h5 class="modal-title" id="addAddressModalLabel">
            <i class="fas fa-map-marker-alt mr-2"></i>
            إضافة عنوان جديد
          </h5>
          <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body p-4">
          <form id="addAddressForm" class="needs-validation" novalidate>
            @csrf
            <div class="row">
              <!-- نوع العنوان -->
              <div class="col-md-6 mb-3">
                <label for="type" class="font-weight-bold">
                  <i class="fas fa-home mr-1"></i>
                  نوع العنوان
                </label>
                <select name="type" id="type" class="form-control custom-select" required>
                  <option value="">اختر نوع العنوان</option>
                  <option value="home">منزل</option>
                  <option value="work">عمل</option>
                </select>
                <div class="invalid-feedback">
                  يرجى اختيار نوع العنوان
                </div>
              </div>
  
              <!-- المحافظة -->
              <div class="col-md-6 mb-3">
                <label for="governorate_id" class="font-weight-bold">
                  <i class="fas fa-map mr-1"></i>
                  المحافظة
                </label>
                <select name="governorate_id" id="governorate_id" class="form-control custom-select" required>
                  <option value="">اختر المحافظة</option>
                  @foreach($governorates as $governorate)
                    <option value="{{ $governorate->id }}">{{ $governorate->name }}</option>
                  @endforeach
                </select>
                <div class="invalid-feedback">
                  يرجى اختيار المحافظة
                </div>
              </div>
  
              <!-- العنوان -->
              <div class="col-12 mb-3">
                <label for="address" class="font-weight-bold">
                  <i class="fas fa-map-signs mr-1"></i>
                  العنوان بالتفصيل
                </label>
                <textarea name="address" id="address" class="form-control" rows="2" required></textarea>
                <div class="invalid-feedback">
                  يرجى إدخال العنوان بالتفصيل
                </div>
              </div>
  
              <!-- المدينة -->
              <div class="col-md-6 mb-3">
                <label for="city" class="font-weight-bold">
                  <i class="fas fa-city mr-1"></i>
                  المدينة
                </label>
                <input type="text" name="city" id="city" class="form-control" required>
                <div class="invalid-feedback">
                  يرجى إدخال اسم المدينة
                </div>
              </div>
  
              <!-- الرمز البريدي -->
              <div class="col-md-6 mb-3">
                <label for="postal_code" class="font-weight-bold">
                  <i class="fas fa-mailbox mr-1"></i>
                  الرمز البريدي
                </label>
                <input type="text" name="postal_code" id="postal_code" class="form-control" required>
                <div class="invalid-feedback">
                  يرجى إدخال الرمز البريدي
                </div>
              </div>
  
              <!-- رقم الهاتف الأول -->
              <div class="col-md-6 mb-3">
                <label for="phone_1" class="font-weight-bold">
                  <i class="fas fa-phone mr-1"></i>
                  رقم الهاتف الأول
                </label>
                <input type="tel" name="phone_1" id="phone_1" class="form-control" 
                       pattern="[0-9]{10,}" required>
                <div class="invalid-feedback">
                  يرجى إدخال رقم هاتف صحيح
                </div>
              </div>
  
              <!-- رقم الهاتف الثاني -->
              <div class="col-md-6 mb-3">
                <label for="phone_2" class="font-weight-bold">
                  <i class="fas fa-phone-alt mr-1"></i>
                  رقم الهاتف الثاني (اختياري)
                </label>
                <input type="tel" name="phone_2" id="phone_2" class="form-control" 
                       pattern="[0-9]{10,}">
              </div>
  
              <!-- العنوان الافتراضي -->
              <div class="col-12">
                <div class="default-address-container">
                  <input type="checkbox" class="default-address-checkbox" name="is_default" id="is_default" value="1">
                  <label class="default-address-label" for="is_default">
                    <div class="default-address-switch"></div>
                    <span class="default-address-text">تعيين كعنوان افتراضي</span>
                  </label>
                </div>
              </div>
            </div>
  
            <div class="text-center mt-4">
              <button type="button" class="btn btn-light mr-2" data-dismiss="modal">
                <i class="fas fa-times mr-1"></i>
                إلغاء
              </button>
              <button type="submit" class="btn custom-btn" id="saveAddressBtn">
                <i class="fas fa-save mr-1"></i>
                حفظ العنوان
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
</div>
  
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    $(document).ready(function() {
        const mainColor = '#f74e36';
        const mainColorHover = '#e63e28';

        const swalCustomConfig = {
            confirmButtonColor: mainColor,
            confirmButtonText: 'موافق',
            customClass: {
                confirmButton: 'custom-swal-btn'
            }
        };

        $('#saveAddressBtn').click(function(e) {
            e.preventDefault();
            var formData = $('#addAddressForm').serialize();

            $.ajax({
                url: "{{ route('addresses.storeAjax') }}",
                type: "POST",
                data: formData,
                success: function(response) {
                    if (response.success) {
                        // Add the new address to the address list
                        var addressType = response.address.type == 'home' ? 'منزل' : 'العمل';
                        var addressIcon = response.address.type == 'home' ? 'fa-home' : 'fa-building';
                        
                        var newAddressCard = `
                            <div class="address-card">
                                <input type="radio" name="address_id" id="address-${response.address.id}" 
                                       value="${response.address.id}" checked>
                                <label for="address-${response.address.id}" class="address-label">
                                    <div class="address-type">
                                        <i class="fas ${addressIcon} ml-2"></i>
                                        <span>${addressType}</span>
                                    </div>
                                    <div class="address-details">
                                        <p class="address-text">${response.address.address}, ${response.address.city}, ${response.address.governorate_name}</p>
                                        <div class="phone-numbers">
                                            <p class="phone">
                                                <i class="fas fa-phone ml-1"></i>
                                                هاتف 1: ${response.address.phone_1}
                                                ${response.address.phone_2 ? ' | هاتف 2: ' + response.address.phone_2 : ''}
                                            </p>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        `;

                        $('#address-list').prepend(newAddressCard);
                        $('#shipping-cost-value').text(response.shipping_cost.toFixed(2));

                        // Show success message with custom styling
                        Swal.fire({
                            ...swalCustomConfig,
                            title: 'تم',
                            text: 'تم إضافة العنوان بنجاح',
                            icon: 'success'
                        });

                        $('#addAddressModal').modal('hide');
                        $('#addAddressForm')[0].reset();
                    } else {
                        // Handle errors
                        var errors = response.errors;
                        var errorMessage = '';
                        $.each(errors, function(key, value) {
                            errorMessage += value[0] + '<br>';
                        });
                        
                        Swal.fire({
                            ...swalCustomConfig,
                            title: 'خطأ',
                            html: errorMessage,
                            icon: 'error'
                        });
                    }
                },
                error: function(xhr, status, error) {
                    Swal.fire({
                        ...swalCustomConfig,
                        title: 'خطأ',
                        text: 'حدث خطأ أثناء حفظ العنوان',
                        icon: 'error'
                    });
                }
            });
        });

        // Handle address selection change
        $(document).on('change', 'input[name="address_id"]', function() {
            var selectedAddressId = $(this).val();
            
            $.ajax({
                url: "{{ route('cart.update.shipping.cost') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    address_id: selectedAddressId
                },
                success: function(response) {
                    if (response.success) {
                        $('#shipping-cost-value').text(response.shipping_cost.toFixed(2));
                        $('#cart-total').text(response.total.toFixed(2));
                    } else {
                        Swal.fire({
                            ...swalCustomConfig,
                            title: 'خطأ',
                            text: response.message,
                            icon: 'error'
                        });
                    }
                },
                error: function(xhr, status, error) {
                    Swal.fire({
                        ...swalCustomConfig,
                        title: 'خطأ',
                        text: 'حدث خطأ أثناء تحديث تكلفة الشحن',
                        icon: 'error'
                    });
                }
            });
        });

        // Handle shipping company selection change
        $(document).on('change', '#shipping_company', function() {
            var selectedCompanyId = $(this).val();
            var selectedAddressId = $('input[name="address_id"]:checked').val();

            $.ajax({
                url: "{{ route('cart.update.shipping.cost') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    address_id: selectedAddressId,
                    shipping_company_id: selectedCompanyId
                },
                success: function(response) {
                    if (response.success) {
                        $('#shipping-cost-value').text(response.shipping_cost.toFixed(2));
                        $('#cart-total').text(response.total.toFixed(2));
                    } else {
                        Swal.fire({
                            ...swalCustomConfig,
                            title: 'خطأ',
                            text: response.message,
                            icon: 'error'
                        });
                    }
                },
                error: function(xhr, status, error) {
                    Swal.fire({
                        ...swalCustomConfig,
                        title: 'خطأ',
                        text: 'حدث خطأ أثناء تحديث تكلفة الشحن',
                        icon: 'error'
                    });
                }
            });
        });
    });

    // Add custom styles for SweetAlert2 button
    const style = document.createElement('style');
    style.textContent = `
        .custom-swal-btn:focus {
            box-shadow: 0 0 0 3px rgba(247, 78, 54, 0.5) !important;
        }
    `;
    document.head.appendChild(style);
</script>

<script>
    // Form validation
    (function() {
      'use strict';
      window.addEventListener('load', function() {
        var forms = document.getElementsByClassName('needs-validation');
        var validation = Array.prototype.filter.call(forms, function(form) {
          form.addEventListener('submit', function(event) {
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
            }
            form.classList.add('was-validated');
          }, false);
        });
      }, false);
    })();
    </script>
@endsection