@extends('layouts.main')

@section('title', 'Your Cart')

@section('style')
  <style>
    .form-check-input:checked+.form-check-label {
      background-color: #e8f4ff;
      border-radius: 6px;
      padding: 8px 12px;
    }

    .card-title {
      border-bottom: 1px solid #ddd;
      padding-bottom: 8px;
    }

    .card {
      transition: 0.2s ease;
    }

    .card:hover {
      box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
    }

    .address-card {
      border: 1px solid #dee2e6;
      border-radius: 8px;
      padding: 12px 16px;
      margin-bottom: 16px;
      background-color: #fff;
    }

    .address-card:hover {
      background-color: #f9f9f9;
    }

    .address-label {
      font-weight: 600;
      font-size: 15px;
    }

    .address-details {
      font-size: 14px;
      color: #555;
    }
  </style>
@endsection


@section('content')
  <div class="container my-5">
    @if (Auth::guest())
      <div class="alert alert-warning text-center">
        Please <a href="{{ route('login') }}" class="fw-bold">login</a> to proceed to checkout.
      </div>
      @return
    @endif

    <div class="row">
      <!-- LEFT -->
      <div class="col-md-7">
        <!-- SELECT ADDRESS -->



        <div class="user-addresses mb-4 border rounded p-4 shadow-sm bg-light">

          <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="mb-0">Select Delivery Address</h5>
            <button type="button" class="btn btn-outline-primary btn-sm" id="toggleNewAddressBtn">
              @if ($addresses->count())
                + Add New Address
              @else
                Cancle
              @endif
            </button>
          </div>
          <div id="newAddressForm" class="{{ $addresses->count() ? 'd-none' : '' }} mb-2">
            <form action="{{ route('user.addressStore') }}" method="POST" class="mt-4">
              @csrf
              <div class="card shadow-sm p-4">
                <h4 class="mb-4">Add New Address</h4>
                <div class="mb-3">
                  <label class="form-label d-block">Address Label</label>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="label" id="home" value="1"
                      {{ old('label', '1') == '1' ? 'checked' : '' }}>
                    <label class="form-check-label" for="home">Home</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="label" id="office" value="2"
                      {{ old('label') == '2' ? 'checked' : '' }}>
                    <label class="form-check-label" for="office">Office</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="label" id="other" value="3"
                      {{ old('label') == '3' ? 'checked' : '' }}>
                    <label class="form-check-label" for="other">Other</label>
                  </div>
                </div>
                @error('label')
                  <small class="text-danger">{{ $message }}</small>
                @enderror

                <div class="mb-3">
                  <label for="line1" class="form-label">Address Line 1</label>
                  <input type="text" name="line1" id="line1" class="form-control" value="{{ old('line1') }}"
                    required>
                </div>
                @error('line1')
                  <small class="text-danger">{{ $message }}</small>
                @enderror

                <div class="mb-3">
                  <label for="line2" class="form-label">Address Line 2 (Optional)</label>
                  <input type="text" name="line2" id="line2" class="form-control" value="{{ old('line2') }}">
                </div>
                @error('line2')
                  <small class="text-danger">{{ $message }}</small>
                @enderror

                <div class="row mb-3">
                  <div class="col-md-4">
                    <label for="pincode" class="form-label">Pincode</label>
                    <input type="text" name="pincode" id="pincode" class="form-control" value="{{ old('pincode') }}"
                      required>
                    @error('pincode')
                      <small class="text-danger">{{ $message }}</small>
                    @enderror
                  </div>
                  <div class="col-md-4">
                    <label for="city" class="form-label">City</label>
                    <input type="text" name="city" id="city" class="form-control" value="{{ old('city') }}"
                      required>
                    @error('city')
                      <small class="text-danger">{{ $message }}</small>
                    @enderror
                  </div>
                  <div class="col-md-4">
                    <label for="district" class="form-label">District</label>
                    <input type="text" name="district" id="district" class="form-control"
                      value="{{ old('district') }}">
                    @error('district')
                      <small class="text-danger">{{ $message }}</small>
                    @enderror
                  </div>
                </div>

                <div class="row mb-3">
                  <div class="col-md-6">
                    <label for="state" class="form-label">State</label>
                    <input type="text" name="state" id="state" class="form-control" value="{{ old('state') }}"
                      required>
                    @error('state')
                      <small class="text-danger">{{ $message }}</small>
                    @enderror
                  </div>
                  <div class="col-md-6">
                    <label for="country" class="form-label">Country</label>
                    <input type="text" name="country" id="country" class="form-control"
                      value="{{ old('country', 'India') }}" required>
                    @error('country')
                      <small class="text-danger">{{ $message }}</small>
                    @enderror
                  </div>
                </div>

                <div class="d-flex justify-content-between">
                  <button type="submit" class="btn btn-primary w-100 me-2">Save</button>
                </div>
              </div>
            </form>
          </div>
          @if ($addresses->count())
            <form method="POST" action="{{ route('checkout') }}">
              <div class="card p-4 mb-4 shadow-sm">
                <div class="form-check mb-3">
                  <input type="checkbox" class="form-check-input" id="add_gst" name="add_gst"
                    onchange="toggleGSTFields()" {{ old('add_gst') ? 'checked' : '' }}>
                  <label class="form-check-label fw-semibold" for="add_gst">Add GST Details</label>
                </div>

                <div id="gst_fields" style="display: none;">
                  <div class="mb-3">
                    <label for="gst_number" class="form-label">GST Number</label>
                    <input type="text" class="form-control @error('gst_number') is-invalid @enderror"
                      id="gst_number" name="gst_number" placeholder="Enter GST Number"
                      value="{{ old('gst_number', Auth::user()->gst_number) }}">
                    @error('gst_number')
                      <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                  </div>

                  <div class="mb-2">
                    <label for="org_name" class="form-label">Organization Name</label>
                    <input type="text" class="form-control @error('org_name') is-invalid @enderror" id="org_name"
                      name="org_name" placeholder="Enter Organization Name"
                      value="{{ old('org_name', Auth::user()->org_name) }}">
                    @error('org_name')
                      <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                  </div>
                </div>
              </div>
              @csrf
              @foreach ($addresses as $key => $address)
                @php
                  if ($address->label == 1) {
                      $address->label = 'Home';
                  } elseif ($address->label == 2) {
                      $address->label = 'Office';
                  } else {
                      $address->label = 'Other';
                  }
                @endphp
                <div class="form-check address-card">
                  <input id="address_{{ $key }}" class="form-check-input me-2" type="radio"
                    name="address" value="{{ $address->id }}" {{ $loop->first ? 'checked' : '' }}>
                  <label for="address_{{ $key }}" class="form-check-label w-100">
                    <div class="address-label">
                      {{ $address->label }}
                    </div>
                    <div class="address-details">
                      <strong>Address: </strong>{{ $address->line1 }}, {{ $address->line2 }}<br>
                      <strong>City: </strong>{{ $address->city }}<br>
                      <strong>State: </strong>{{ $address->state }}<br>
                      <strong>Country: </strong>{{ $address->country }}<br>
                      <strong>Pincode: </strong>{{ $address->pincode }}
                    </div>
                  </label>
                </div>
              @endforeach
              <div>
                <button class="btn btn-success" type="submit">Save & Next</button>
              </div>
            </form>
          @else
            <div class="alert alert-info">No saved addresses. Please add a new one below.</div>
          @endif
        </div>
        <!-- ADD NEW ADDRESS -->

      </div>
    </div>
  </div>
@endsection

@section('script')
  <script>
    document.getElementById('toggleNewAddressBtn').addEventListener('click', function() {
      document.getElementById('newAddressForm').classList.toggle('d-none');
      const toggleText = document.getElementById('newAddressForm').classList.contains('d-none') ?
        '+ Add New Address' : 'Cancel';
      this.textContent = toggleText;
    });

    document.getElementById('cancelNewAddressBtn').addEventListener('click', function() {
      document.getElementById('newAddressForm').classList.add('d-none');
      document.getElementById('toggleNewAddressBtn').textContent = '+ Add New Address';
    });
  </script>
  <script>
    function toggleGSTFields() {
      const checkbox = document.getElementById('add_gst');
      const gstFields = document.getElementById('gst_fields');

      if (checkbox.checked) {
        gstFields.style.display = 'block';
      } else {
        gstFields.style.display = 'none';
      }
    }

    // Run on page load
    window.addEventListener('DOMContentLoaded', toggleGSTFields);
  </script>
@endsection