@extends('admin.dashboard.layout.app')

@section('style')
<style>
        /* Make the main row grow with content on THIS page only */
        .main > .vh-100 {
            height: auto !important;
            min-height: 100vh; 
        }

        .auth-page {
            padding: 24px 0 40px;
            background: radial-gradient(circle at top left, #eef2ff 0, #f9fafb 45%, #ffffff 100%);
        }

        @media (min-width: 768px) {
            .auth-divider-md-end {
                border-right: 1px solid #e9ecef;
            }

            .auth-page {
                padding-top: 32px;
                padding-bottom: 48px;
            }
        }

        .auth-card {
            border-radius: 18px;
            border: 1px solid #eef2ff;
            box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16); 
            overflow: hidden;
            position: relative;
            top: 0;
            transition:
                transform 0.25s ease,
                box-shadow 0.25s ease,
                border-color 0.25s ease;
            background: #ffffff;
        }

        .auth-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 24px 65px rgba(15, 23, 42, 0.22);
            border-color: #d0d4ff;
        }

        .auth-card::before {
            content: "";
            position: absolute;
            inset: 0;
            opacity: 0.9;
        }

        .auth-card .card-body {
            position: relative;
            z-index: 1; 
        }
    </style>
@endsection


@section('content')
    @include('admin.dashboard.layout.header', ['title' => 'Merchant Register'])

    <div class="auth-page">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-8 col-lg-9">
                    <div class="card auth-card border-0">

                        <div class="card-body p-4 p-md-5">

                            <div class="text-center mb-4">
                                <h4 class="fw-semibold mb-1">Create an Account</h4>
                                <p class="text-muted mb-0">
                                    Enter your details to get started.
                                </p>
                            </div>

                            <form method="POST" action="{{route('admin.createMerchant')}}" enctype="multipart/form-data">
                                @csrf

                                <div class="row">
                                    <div class="col-md-6 mb-4 mb-md-0 auth-divider-md-end pe-md-4">
                                        <div class="mb-3">
                                            <label for="name" class="form-label">Full Name</label>
                                            <input
                                                type="text"
                                                id="name"
                                                name="name"
                                                value="{{ old('name') }}"
                                                class="form-control @error('name') is-invalid @enderror"
                                                placeholder="Enter your full name">
                                            @error('name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="mb-3">
                                            <label for="business_name" class="form-label">Business Name</label>
                                            <input
                                                type="text"
                                                id="business_name"
                                                name="business_name"
                                                value="{{ old('business_name') }}"
                                                class="form-control @error('business_name') is-invalid @enderror"
                                                placeholder="Enter business name">
                                            @error('business_name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="mb-3">
                                            <label for="phone" class="form-label">Phone</label>
                                            <input
                                                type="tel"
                                                id="phone"
                                                name="phone"
                                                value="{{ old('phone') }}"
                                                class="form-control @error('phone') is-invalid @enderror"
                                                placeholder="03xx-xxxxxxx">
                                            @error('phone')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="mb-3">
                                            <label for="city" class="form-label">City</label>
                                            <input
                                                type="text"
                                                id="city"
                                                name="city"
                                                value="{{ old('city') }}"
                                                class="form-control @error('city') is-invalid @enderror"
                                                placeholder="Enter city">
                                            @error('city')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="mb-3">
                                            <label for="password" class="form-label">Password</label>
                                            <input
                                                type="password"
                                                id="password"
                                                name="password"
                                                required
                                                autocomplete="new-password"
                                                class="form-control @error('password') is-invalid @enderror"
                                                placeholder="Enter password">
                                            @error('password')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-6 ps-md-4">
                                        <div class="mb-3">
                                            <label for="cnic" class="form-label">CNIC</label>
                                            <input
                                                type="text"
                                                id="cnic"
                                                name="cnic"
                                                value="{{ old('cnic') }}"
                                                class="form-control @error('cnic') is-invalid @enderror"
                                                placeholder="xxxxx-xxxxxxx-x">
                                            @error('cnic')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="mb-3">
                                            <label for="country" class="form-label">Country</label>
                                            <input
                                                type="text"
                                                id="country"
                                                name="country"
                                                value="{{ old('country') }}"
                                                class="form-control @error('country') is-invalid @enderror"
                                                placeholder="Enter country">
                                            @error('country')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="mb-3">
                                            <label for="address" class="form-label">Address</label>
                                            <input
                                                type="text"
                                                id="address"
                                                name="address"
                                                value="{{ old('address') }}"
                                                class="form-control @error('address') is-invalid @enderror"
                                                placeholder="House / Street / Area">
                                            @error('address')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        {{-- New Payment Method dropdown --}}
                                       {{-- Payment Method dropdown with checkboxes --}}
@php
    $oldPaymentMethods = (array) old('payment_method', []);
@endphp

<div class="mb-3">
    <label for="payment_method_dropdown" class="form-label">Payment Method</label>

    <div class="dropdown">
        <button
            class="form-select text-start d-flex justify-content-between align-items-center"
            type="button"
            id="payment_method_dropdown"
            data-bs-toggle="dropdown"
            aria-expanded="false"
        >
            <span id="payment_method_dropdown_text">
                Select payment method
            </span>
            <span class="ms-2">
                <i class="mdi mdi-chevron-down"></i> {{-- or remove if mdi not used --}}
            </span>
        </button>

        <ul class="dropdown-menu w-100" aria-labelledby="payment_method_dropdown">
            <li>
                <div class="form-check px-3">
                    <input
                        class="form-check-input payment-method-checkbox"
                        type="checkbox"
                        id="pm_jazzcash"
                        name="payment_method[]"
                        value="1"
                        {{ in_array('1', $oldPaymentMethods) ? 'checked' : '' }}
                    >
                    <label class="form-check-label" for="pm_jazzcash">
                        JazzCash
                    </label>
                </div>
            </li>
            <li>
                <div class="form-check px-3">
                    <input
                        class="form-check-input payment-method-checkbox"
                        type="checkbox"
                        id="pm_easypaisa"
                        name="payment_method[]"
                        value="2"
                        {{ in_array('2', $oldPaymentMethods) ? 'checked' : '' }}
                    >
                    <label class="form-check-label" for="pm_easypaisa">
                        Easypaisa
                    </label>
                </div>
            </li>
        </ul>
    </div>

    @error('payment_method')
        <div class="invalid-feedback d-block">{{ $message }}</div>
    @enderror
</div>


                                        {{-- New Service Rate field --}}
                                        <div class="mb-3">
                                            <label for="service_rate" class="form-label">Service Rate (%)</label>
                                            <input
                                                type="number"
                                                id="service_rate"
                                                name="service_rate"
                                                value="{{ old('service_rate') }}"
                                                step="0.01"
                                                min="0"
                                                class="form-control @error('service_rate') is-invalid @enderror"
                                                placeholder="Enter service rate">
                                            @error('service_rate')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        {{-- Confirm password & image fields removed as requested --}}
                                    </div>
                                </div>

                                <div class="mt-4 pt-3 border-top">
                                    <div class="form-check mb-3">
                                        <input
                                            class="form-check-input"
                                            type="checkbox"
                                            value="1"
                                            id="terms"
                                            checked>
                                        <label class="form-check-label small" for="terms">
                                            I agree to the
                                            <a href="javascript:;" class="link-primary text-decoration-none">Terms and Conditions</a>
                                        </label>
                                    </div>

                                    <div class="d-grid">
                                        <button type="submit" class="btn btn-primary">
                                            Sign Up
                                        </button>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>

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

@section('script')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const checkboxes = document.querySelectorAll('.payment-method-checkbox');
        const textEl = document.getElementById('payment_method_dropdown_text');
        const defaultText = 'Select payment method';

        function refreshPaymentMethodText() {
            const selected = [];

            checkboxes.forEach(function (cb) {
                if (cb.checked) {
                    const label = document.querySelector('label[for="' + cb.id + '"]');
                    if (label) {
                        selected.push(label.textContent.trim());
                    }
                }
            });

            textEl.textContent = selected.length ? selected.join(', ') : defaultText;
        }

        checkboxes.forEach(function (cb) {
            cb.addEventListener('change', refreshPaymentMethodText);
        });

        // Run on page load (for old() values)
        refreshPaymentMethodText();
    });
</script>
@endsection