@extends('cargo_company.templates.layout')

@section('head')
<style>
    .img-picker {
        position: relative;
        width: 96px;
        height: 96px;
        border-radius: 50%;
        overflow: hidden;
        border: 2px dashed #cbd5e1;
        background: #f8fafc;
        cursor: pointer;
        transition: border-color .15s ease, background .15s ease;
    }
    .img-picker:hover { border-color: #93c5fd; background: #eff6ff; }
    .img-picker.has-image { border-style: solid; border-color: #e2e8f0; background: #fff; }

    .img-picker .picker-input {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        opacity: 0; cursor: pointer; z-index: 5;
    }
    .img-picker .picker-content {
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        z-index: 1; pointer-events: none;
    }
    .img-picker .picker-content img {
        width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .img-picker .picker-placeholder {
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 4px; color: #94a3b8;
        font-size: 10.5px; line-height: 1.2;
    }
    .img-picker .picker-placeholder i { font-size: 22px; }

    .img-picker .picker-overlay {
        position: absolute; inset: 0;
        z-index: 6; pointer-events: none;
        display: flex; align-items: flex-end; justify-content: center;
        padding-bottom: 8px;
        background: linear-gradient(180deg, rgba(15,23,42,0) 40%, rgba(15,23,42,.75) 100%);
        opacity: 0; transition: opacity .15s ease;
    }
    .img-picker.has-image:hover .picker-overlay { opacity: 1; }
    .img-picker .picker-overlay button {
        pointer-events: auto;
        background: rgba(255,255,255,.18);
        border: 1px solid rgba(255,255,255,.35);
        color: #fff; width: 26px; height: 26px;
        border-radius: 8px; display: flex; align-items: center; justify-content: center;
        font-size: 13px; cursor: pointer; backdrop-filter: blur(4px);
    }
    .img-picker .picker-overlay button:hover { background: rgba(239,68,68,.85); border-color: rgba(239,68,68,.95); }

    .notice {
        display: flex; align-items: center; gap: 12px;
        padding: 14px 18px; border-radius: 12px; margin-bottom: 16px;
        flex-wrap: wrap;
    }
    .notice.warning { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; }
    .notice i { font-size: 20px; flex-shrink: 0; }
    .notice .msg { flex: 1; font-size: 13.5px; font-weight: 500; min-width: 180px; }
    .notice .msg strong { font-weight: 700; }
</style>
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <h5 class="mb-0">Add Warehouse Account</h5>
    <a href="{{ route('cargo_company.warehouses.index') }}" class="btn btn-sm btn-light">
        <i class="ri-arrow-left-line"></i> Back
    </a>
</div>

<div class="notice warning">
    <i class="ri-alert-line"></i>
    <div class="msg">
        <strong>One warehouse only.</strong> Your cargo company can have a single warehouse account — this form will be disabled once one exists.
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-lg-7">
        <div class="card">
            <form id="warehouseForm" enctype="multipart/form-data">
                @csrf
                <div class="card-body">

                    {{-- Logo --}}
                    <div class="text-center mb-4">
                        <div class="img-picker mx-auto" id="logoPicker">
                            <input type="file" name="logo" class="picker-input" accept="image/*">
                            <div class="picker-content">
                                <div class="picker-placeholder">
                                    <i class="ri-image-add-line"></i>
                                    <span>Logo</span>
                                </div>
                            </div>
                            <div class="picker-overlay">
                                <button type="button" class="btn-remove" title="Remove logo">
                                    <i class="ri-delete-bin-line"></i>
                                </button>
                            </div>
                        </div>
                        <div class="text-muted fs-12 mt-2">Optional · JPG, PNG, WebP · max 5 MB</div>
                    </div>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">First Name <span class="text-danger">*</span></label>
                            <input type="text" name="first_name" class="form-control" required maxlength="120">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Last Name <span class="text-danger">*</span></label>
                            <input type="text" name="last_name" class="form-control" required maxlength="120">
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">Email <span class="text-danger">*</span></label>
                            <input type="email" name="email" class="form-control" required maxlength="255">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Dial Code <span class="text-danger">*</span></label>
                            <input type="text" name="dial_code" class="form-control" placeholder="+971" required maxlength="5">
                        </div>
                        <div class="col-md-8">
                            <label class="form-label">Phone <span class="text-danger">*</span></label>
                            <input type="text" name="phone" class="form-control" required maxlength="15">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Password <span class="text-danger">*</span></label>
                            <input type="password" name="password" class="form-control" required minlength="8">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Confirm Password <span class="text-danger">*</span></label>
                            <input type="password" name="confirm_password" class="form-control" required>
                        </div>
                    </div>
                </div>
                <div class="card-footer d-flex justify-content-end gap-2">
                    <a href="{{ route('cargo_company.warehouses.index') }}" class="btn btn-light">Cancel</a>
                    <button type="submit" class="btn btn-primary" id="submitBtn">
                        <span class="btn-text">Create Warehouse</span>
                        <span class="spinner-border spinner-border-sm d-none ms-2"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
$(function () {

    /* ---- Logo picker (opacity-0 file input covers picker → native click) ---- */
    $(document).on('change', '#logoPicker .picker-input', function () {
        var file = this.files && this.files[0];
        if (!file) return;
        var url = URL.createObjectURL(file);
        var $picker = $(this).closest('.img-picker');
        $picker.addClass('has-image');
        $picker.find('.picker-content').html('<img src="' + url + '" alt="">');
    });

    $(document).on('click', '#logoPicker .btn-remove', function (e) {
        e.stopPropagation();
        e.preventDefault();
        var $picker = $(this).closest('.img-picker');
        $picker.removeClass('has-image');
        $picker.find('.picker-content').html(
            '<div class="picker-placeholder"><i class="ri-image-add-line"></i><span>Logo</span></div>'
        );
        $picker.find('.picker-input').val('');
    });

    /* ---- Submit ---- */
    $('#warehouseForm').on('submit', function (e) {
        e.preventDefault();

        var pw  = $('input[name=password]').val();
        var cpw = $('input[name=confirm_password]').val();
        if (pw !== cpw) {
            toastr.error('Passwords do not match.');
            return;
        }

        var $btn = $('#submitBtn');
        var fd   = new FormData(this);

        $btn.prop('disabled', true).find('.btn-text').text('Creating...');
        $btn.find('.spinner-border').removeClass('d-none');

        $.ajax({
            url: '{{ route("cargo_company.warehouses.store") }}',
            type: 'POST',
            data: fd,
            processData: false,
            contentType: false,
            success: function (res) {
                if (res.status === 'success') {
                    toastr.success(res.message);
                    window.location.href = res.redirect;
                } else {
                    toastr.error(res.message);
                }
            },
            error: function (xhr) {
                toastr.error(xhr.responseJSON?.message || 'Failed to create warehouse');
            },
            complete: function () {
                $btn.prop('disabled', false).find('.btn-text').text('Create Warehouse');
                $btn.find('.spinner-border').addClass('d-none');
            }
        });
    });
});
</script>
@endsection