@extends('admin.layouts.admin')

@section('title','Add Merchant')
@section('page-title','Add Merchant')

@section('content')

<div class="card border-0 shadow-sm">
    <div class="card-header bg-white">
        <strong>Merchant Information</strong>
        <small class="text-muted d-block">Register a new merchant into the system</small>
    </div>

    <div class="card-body">

        <form method="POST" action="{{ route('admin.merchants.store') }}">
            @csrf

            <!-- BASIC INFO -->
            <h6 class="mb-3 text-muted">Basic Information</h6>

            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <label class="form-label">Merchant Name</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-shop"></i></span>
                        <input type="text"
                               name="name"
                               class="form-control @error('name') is-invalid @enderror"
                               placeholder="ABC Store"
                               value="{{ old('name') }}"
                               required>
                        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="col-md-6">
                    <label class="form-label">Business Type</label>
                    <select name="business_type" class="form-select">
                        <option value="">Select type</option>
                        <option>Restaurant</option>
                        <option>Pharmacy</option>
                        <option>Retail</option>
                        <option>Grocery</option>
                        <option>E-commerce</option>
                    </select>
                </div>
            </div>

            <!-- CONTACT -->
            <h6 class="mb-3 text-muted">Contact Details</h6>

            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <label class="form-label">Email</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-envelope"></i></span>
                        <input type="email"
                               name="email"
                               class="form-control @error('email') is-invalid @enderror"
                               placeholder="merchant@email.com"
                               value="{{ old('email') }}"
                               required>
                        @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="col-md-6">
                    <label class="form-label">Phone</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-telephone"></i></span>
                        <input type="text"
                               name="phone"
                               class="form-control"
                               placeholder="+94 7X XXX XXXX"
                               value="{{ old('phone') }}">
                    </div>
                </div>
            </div>

            <!-- PASSWORD -->
            <h6 class="mb-3 text-muted">Login Credentials</h6>

            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <label class="form-label">Password</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-lock"></i></span>
                        <input type="password"
                               name="password"
                               class="form-control @error('password') is-invalid @enderror"
                               placeholder="********"
                               required>
                        @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <small class="text-muted">Minimum 8 characters</small>
                </div>

                <div class="col-md-6">
                    <label class="form-label">Confirm Password</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
                        <input type="password"
                               name="password_confirmation"
                               class="form-control"
                               placeholder="********"
                               required>
                    </div>
                </div>
            </div>

            <!-- ADDRESS -->
            <h6 class="mb-3 text-muted">Location</h6>

            <div class="row g-3 mb-4">
                <div class="col-md-12">
                    <label class="form-label">Address</label>
                    <textarea name="address"
                              class="form-control"
                              rows="2"
                              placeholder="Business address">{{ old('address') }}</textarea>
                </div>

                <div class="col-md-4">
                    <label class="form-label">City</label>
                    <input type="text" name="city" class="form-control" value="{{ old('city') }}">
                </div>

                <div class="col-md-4">
                    <label class="form-label">Zone</label>
                    <select name="zone_id" class="form-select">
                        <option value="">Select zone</option>
                        <option value="1">Colombo</option>
                        <option value="2">Kandy</option>
                        <option value="3">Galle</option>
                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Postal Code</label>
                    <input type="text" name="postal_code" class="form-control">
                </div>
            </div>

            <!-- FINANCE -->
            <h6 class="mb-3 text-muted">Finance</h6>

            <div class="row g-3 mb-4">
                <div class="col-md-4">
                    <label class="form-label">Commission (%)</label>
                    <input type="number" name="commission"
                           class="form-control"
                           placeholder="10">
                </div>

                <div class="col-md-4">
                    <label class="form-label">Settlement Cycle</label>
                    <select name="settlement_cycle" class="form-select">
                        <option>Weekly</option>
                        <option>Bi-weekly</option>
                        <option>Monthly</option>
                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Bank Account</label>
                    <input type="text" name="bank_account" class="form-control">
                </div>
            </div>

            <!-- STATUS -->
            <h6 class="mb-3 text-muted">Status</h6>

            <div class="form-check form-switch mb-4">
                <input class="form-check-input" type="checkbox"
                       name="is_active" value="1" checked>
                <label class="form-check-label">Active Merchant</label>
            </div>

            <!-- ACTIONS -->
            <div class="d-flex justify-content-end gap-2">
                <a href="{{ route('admin.merchants.index') }}" class="btn btn-light">
                    Cancel
                </a>
                <button class="btn btn-primary">
                    <i class="bi bi-check-circle"></i> Create Merchant
                </button>
            </div>

        </form>

    </div>
</div>

@endsection