@extends('layouts.app')

@section('title', 'Edit Courier')

@section('page-wrapper')
    <!-- Page Header with Breadcrumb -->
    <div class="page-header d-print-none">
        <div class="container-fluid">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <!-- Breadcrumb -->
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ route('dashboard') }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path d="M5 12l-2 0l9 -9l9 9l-2 0" />
                                        <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
                                        <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
                                    </svg>
                                    Dashboard
                                </a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ route('couriers.index') }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="icon icon-tabler icons-tabler-outline icon-tabler-package-import">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path d="M12 21l-8 -4.5v-9l8 -4.5l8 4.5v4.5" />
                                        <path d="M12 12l8 -4.5" />
                                        <path d="M12 12v9" />
                                        <path d="M12 12l-8 -4.5" />
                                        <path d="M22 18h-7" />
                                        <path d="M18 15l-3 3l3 3" />
                                    </svg>
                                    Courier
                                </a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Edit</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <!-- Page Body -->
    <div class="page-body">
        <div class="container-fluid">
            <div class="row">
                <!-- Card -->
                <div class="col-md-6 col-12">

                    <div class="card">
                        <!-- Card Header -->
                        <div class="card-header">
                            <h3 class="card-title">Edit Courier</h3>
                        </div>
                        <form id="courierForm" action="{{ route('couriers.update', $courier->id) }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <div class="card-body">
                                <div class="row">
                                    <!-- Vendor Name -->
                                    <div class="mb-3 col-md-12">
                                        <label for="name" class="form-label required">Courier Name</label>
                                        <input type="text" placeholder="Enter courier name"
                                            class="form-control @error('name') is-invalid @enderror" id="name"
                                            name="name" value="{{ old('name', $courier->name) }}">
                                        @error('name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <!-- Courier Logo -->
                                    <div class="mb-3 col-12" id="logo">
                                        <label for="logo" class="form-label required">Courier Logo</label>
                                        <input type="file" class="form-control @error('logo') is-invalid @enderror"
                                            id="logo" name="logo" accept="image/*">
                                        <small class="form-hint">Preferred size: 250px x 250px (JPG, JPEG, PNG
                                            allowed).</small>
                                        @error('logo')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        @if ($courier->logo)
                                            <div id="existing-photos"
                                                class="d-flex flex-wrap gap-3 justify-content-start {{ $courier->logo ? 'mt-3' : '' }}">
                                                <div class="d-flex flex-column items-center">
                                                    <img src="{{ asset('storage/' . $courier->logo) }}" alt="Photo"
                                                        style="max-width: 150px; max-height: 150px; border: 1px solid #ddd; padding: 5px; border-radius: 4px;">
                                                    <button type="button" class="btn btn-sm btn-danger mt-1 remove-photo"
                                                        data-photo-id="{{ $courier->id }}">Remove</button>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="status" class="form-label required">Status</label>
                                        <div>
                                            <label class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" id="status_active"
                                                    name="status" value="Active"
                                                    {{ old('status', $courier->status) === 'Active' ? 'checked' : '' }}>
                                                <span class="form-check-label" for="status_active">Active</span>
                                            </label>
                                            <label class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" id="status_inactive"
                                                    name="status" value="Inactive"
                                                    {{ old('status', $courier->status) === 'Inactive' ? 'checked' : '' }}>
                                                <span class="form-check-label" for="status_inactive">Inactive</span>
                                            </label>
                                        </div>
                                        @error('status')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Card Footer -->
                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary me-3">Update</button>
                                <a href="{{ route('couriers.index') }}" class="btn">Cancel</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            // Handle logo preview
            $('#logo').change(function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('#logoPreview').attr('src', e.target.result).show();
                        $('#logoPreview').parent().addClass('mt-3');
                        $('#logoError').addClass('d-none');
                    }
                    reader.readAsDataURL(file);
                } else {
                    $('#logoPreview').hide();
                    $('#logoPreview').parent().removeClass('mt-3');
                }
            });

            document.querySelectorAll('.remove-photo').forEach(btn => {
                btn.addEventListener('click', function() {
                    const photoId = this.getAttribute('data-photo-id');
                    fetch(`/couriers/courierLogo/${photoId}`, {
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                this.parentElement.remove();
                            }
                        })
                        .catch(console.error);
                });
            });
        });
    </script>
@endsection