@extends('admin.layouts.master')
@section('title', 'Register Corporate Partner')

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    <style>
        :root {
            --primary: #4f46e5;
            --primary-light: #eef2ff;
            --border-color: #e2e8f0;
        }

        body {
            background-color: #f8fafc;
            font-family: 'Inter', sans-serif;
        }

        /* Card Styling */
        .saas-card {
            background: #fff;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            margin-bottom: 1.5rem;
            overflow: hidden;
        }

        .card-header-custom {
            padding: 1rem 1.5rem;
            background: #fff;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .header-icon {
            width: 36px;
            height: 36px;
            background: var(--primary-light);
            color: var(--primary);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        /* Inputs */
        .form-label {
            font-size: 0.85rem;
            font-weight: 600;
            color: #475569;
            margin-bottom: 0.4rem;
        }

        .form-control {
            padding: 0.65rem 1rem;
            border-radius: 8px;
            border: 1px solid #cbd5e1;
            font-size: 0.9rem;
        }

        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
            outline: none;
        }

        /* Validation */
        .is-invalid {
            border-color: #dc2626 !important;
        }

        .error-msg {
            color: #dc2626;
            font-size: 0.75rem;
            margin-top: 4px;
            display: none;
            font-weight: 500;
        }

        @keyframes shake {

            0%,
            100% {
                transform: translateX(0);
            }

            20%,
            60% {
                transform: translateX(-5px);
            }

            40%,
            80% {
                transform: translateX(5px);
            }
        }

        .shake-field {
            animation: shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
        }

        /* Logo Dropzone */
        .logo-dropzone {
            width: 100%;
            height: 160px;
            border: 2px dashed #cbd5e1;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background: #f8fafc;
            transition: 0.2s;
            position: relative;
        }

        .logo-dropzone:hover {
            border-color: var(--primary);
            background: #fff;
        }

        .logo-preview-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 10px;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
            background: #fff;
            border-radius: 12px;
        }

        /* Buttons */
        .btn-primary-custom {
            background: var(--primary);
            color: white;
            border: none;
            padding: 0.6rem 1.5rem;
            border-radius: 8px;
            font-weight: 600;
            transition: 0.2s;
        }

        .btn-primary-custom:hover {
            background: #4338ca;
            transform: translateY(-1px);
            color: white;
        }

        .btn-primary-custom:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }
    </style>
@endpush

@section('content')
    <div class="py-5">

        {{-- Header --}}
        <div class="d-flex justify-content-between align-items-end mb-4">
            <div>
                <h6 class="text-uppercase text-primary small fw-bold mb-1">Corporate Onboarding</h6>
                <h3 class="fw-bold text-dark m-0">New Corporate Partner</h3>
            </div>
            <div class="d-flex gap-3">
                <a href="{{ route('admin.companies') }}" class="btn btn-white border px-4">Cancel</a>
                <button type="button" class="btn-primary-custom" id="triggerSave">
                    <i class="ri-check-line me-1"></i> Register Company
                </button>
            </div>
        </div>

        <form id="createForm" enctype="multipart/form-data">
            @csrf
            {{-- Hidden Type Field --}}
            <input type="hidden" name="type" value="corporate">

            <div class="row g-4">
                {{-- LEFT COLUMN --}}
                <div class="col-xl-8">

                    {{-- 1. Company Identity --}}
                    <div class="saas-card">
                        <div class="card-header-custom">
                            <div class="header-icon"><i class="ri-building-2-line"></i></div>
                            <div>
                                <h6 class="fw-bold m-0 text-dark">Company Identity</h6>
                                <small class="text-muted">Basic registration details</small>
                            </div>
                        </div>
                        <div class="card-body p-4">
                            <div class="row g-4">
                                <div class="col-md-8">
                                    <label class="form-label">Company Name <span class="text-danger">*</span></label>
                                    <input type="text" name="name" id="name" class="form-control"
                                        placeholder="e.g. Maersk Line India Pvt Ltd">
                                    <div class="error-msg">Company Name is required.</div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Company Code <span
                                            class="text-muted fw-normal">(Optional)</span></label>
                                    <input type="text" name="code" class="form-control text-uppercase"
                                        placeholder="AUTO">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Website</label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-white border-end-0"><i
                                                class="ri-global-line text-muted"></i></span>
                                        <input type="text" name="website" class="form-control border-start-0"
                                            placeholder="www.company.com">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Tax ID / GSTIN</label>
                                    <input type="text" name="tax_id" class="form-control text-uppercase"
                                        placeholder="GSTIN...">
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 2. Contact & Address --}}
                    <div class="saas-card">
                        <div class="card-header-custom">
                            <div class="header-icon"><i class="ri-map-pin-user-line"></i></div>
                            <h6 class="fw-bold m-0 text-dark">Contact & Location</h6>
                        </div>
                        <div class="card-body p-4">
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <label class="form-label">Contact Person</label>
                                    <input type="text" name="contact_person_name" class="form-control"
                                        placeholder="Manager Name">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Phone / Mobile</label>
                                    <input type="text" name="phone" class="form-control" placeholder="+91 98765 00000">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Full Address</label>
                                    <textarea name="address" class="form-control" rows="2" placeholder="Street, Building, Area"></textarea>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">City</label>
                                    <input type="text" name="city" class="form-control">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">State</label>
                                    <input type="text" name="state" class="form-control">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Zip Code</label>
                                    <input type="text" name="zip_code" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 3. Portal Access --}}
                    <div class="saas-card">
                        <div class="card-header-custom">
                            <div class="header-icon"><i class="ri-shield-keyhole-line"></i></div>
                            <h6 class="fw-bold m-0 text-dark">Portal Credentials</h6>
                        </div>
                        <div class="card-body p-4">
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <label class="form-label">Login Email <span class="text-danger">*</span></label>
                                    <input type="email" name="email" id="email" class="form-control"
                                        placeholder="info@company.com">
                                    <div class="error-msg">Valid Email is required.</div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Password</label>
                                    <div class="input-group">
                                        <input type="text" name="password" id="password" class="form-control"
                                            placeholder="Auto-generated if empty">
                                        <button class="btn btn-outline-secondary" type="button" onclick="generatePass()"
                                            title="Generate Random"><i class="ri-magic-line"></i></button>
                                        <button class="btn btn-outline-secondary" type="button" onclick="copyPass()"
                                            title="Copy"><i class="ri-file-copy-line"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                {{-- RIGHT COLUMN --}}
                <div class="col-xl-4">

                    {{-- 1. Logo Upload --}}
                    <div class="saas-card">
                        <div class="card-body p-4 text-center">
                            <label class="form-label fw-bold mb-3 d-block text-start">Company Logo</label>
                            <div class="logo-dropzone" onclick="document.getElementById('logoInput').click()">
                                <input type="file" name="logo" id="logoInput" class="d-none" accept="image/*"
                                    onchange="previewLogo(this)">
                                <div id="logoPlaceholder">
                                    <div class="mb-2"><i class="ri-cloud-upload-line text-primary fs-2"></i></div>
                                    <h6 class="fw-bold text-dark mb-1">Click to Upload</h6>
                                    <span class="text-muted small">PNG, JPG (Max 2MB)</span>
                                </div>
                                <img id="logoPreview" class="logo-preview-img">
                            </div>
                            <div class="mt-2 text-end">
                                <button type="button" class="btn btn-sm text-danger p-0" onclick="removeLogo()"
                                    id="removeLogoBtn" style="display:none;">Remove Logo</button>
                            </div>
                        </div>
                    </div>

                    {{-- 2. Corporate Financials --}}
                    <div class="saas-card">
                        <div class="card-header-custom bg-light">
                            <h6 class="fw-bold m-0 text-dark">Corporate Settings</h6>
                        </div>
                        <div class="card-body p-4">

                            {{-- Credit Limit --}}
                            <div class="mb-3">
                                <label class="form-label">Credit Limit (₹)</label>
                                <input type="number" name="credit_limit" class="form-control fw-bold"
                                    placeholder="0.00" min="0">
                                <div class="form-text text-xs">Max amount allowable for credit bookings.</div>
                            </div>

                            <hr class="border-dashed my-3">

                            {{-- Standard Discount --}}
                            <div class="mb-1">
                                <label class="form-label text-primary fw-bold">Standard Discount</label>
                                <div class="input-group">
                                    <input type="number" name="standard_discount"
                                        class="form-control border-end-0 fw-bold text-primary" step="0.1"
                                        value="0">
                                    <span class="input-group-text bg-white border-start-0 text-primary fw-bold">%</span>
                                </div>
                                <div class="form-text text-xs">Applied automatically to all bookings.</div>
                            </div>
                        </div>
                    </div>

                    {{-- 3. Account Status --}}
                    <div class="saas-card">
                        <div class="card-body p-4">
                            <div class="form-check form-switch d-flex justify-content-between align-items-center mb-3 p-0">
                                <label class="form-check-label fw-bold ms-0" for="isActive">Account Active</label>
                                <input class="form-check-input ms-0" type="checkbox" name="is_active" id="isActive"
                                    checked style="width: 2.5em; height: 1.25em;">
                            </div>
                            <label class="form-label mt-2">Internal Notes</label>
                            <textarea name="internal_notes" class="form-control" rows="3" placeholder="Private admin notes..."></textarea>
                        </div>
                    </div>

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

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        // --- 1. Password Utilities ---
        function generatePass() {
            const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#";
            let pass = "";
            for (let i = 0; i < 12; i++) pass += chars.charAt(Math.floor(Math.random() * chars.length));
            $('#password').val(pass).trigger('input');
        }

        function copyPass() {
            let pass = $('#password').val();
            if (pass) {
                navigator.clipboard.writeText(pass);
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'success',
                    title: 'Copied!',
                    showConfirmButton: false,
                    timer: 1500
                });
            }
        }

        // --- 2. Logo Handling ---
        window.previewLogo = function(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#logoPreview').attr('src', e.target.result).fadeIn();
                    $('#logoPlaceholder').hide();
                    $('#removeLogoBtn').show();
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        function removeLogo() {
            $('#logoInput').val('');
            $('#logoPreview').hide();
            $('#logoPlaceholder').fadeIn();
            $('#removeLogoBtn').hide();
        }

        // --- 3. AJAX Submission ---
        $(document).ready(function() {
            // Clear errors on input
            $('input, textarea, select').on('input change', function() {
                $(this).removeClass('is-invalid');
                $(this).siblings('.error-msg').slideUp(200);
            });

            // Trigger Submit
            $('#triggerSave').click(function() {
                $('#createForm').submit();
            });

            $('#createForm').on('submit', function(e) {
                e.preventDefault();
                let btn = $('#triggerSave');
                let originalText = btn.html();
                $('.error-msg').hide();

                let isValid = true;

                function showError(id, msg) {
                    let el = $(id);
                    el.addClass('is-invalid shake-field');
                    el.siblings('.error-msg').text(msg).slideDown(200);
                    setTimeout(() => el.removeClass('shake-field'), 500);
                    isValid = false;
                }

                if (!$('#name').val().trim()) showError('#name', 'Company Name is required.');
                let email = $('#email').val().trim();
                if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) showError('#email',
                    'Valid Email is required.');

                if (!isValid) return;

                let formData = new FormData(this);
                btn.prop('disabled', true).html(
                    '<span class="spinner-border spinner-border-sm me-2"></span> Saving...');

                $.ajax({
                    url: "{{ route('admin.companies.store') }}",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(res) {
                        btn.prop('disabled', false).html(originalText);
                        if (res.status === 'success') {
                            Swal.fire({
                                icon: 'success',
                                title: 'Registered!',
                                text: 'Company has been onboarded.',
                                showConfirmButton: false,
                                timer: 1500
                            }).then(() => {
                                window.location.href = res.redirect_url;
                            });
                        }
                    },
                    error: function(err) {
                        btn.prop('disabled', false).html(originalText);
                        if (err.status === 422) {
                            let errors = err.responseJSON.errors;
                            if (errors.name) showError('#name', errors.name[0]);
                            if (errors.email) showError('#email', errors.email[0]);
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'Something went wrong.'
                            });
                        }
                    }
                });
            });
        });
    </script>
@endpush