@extends('back_office.layouts.app')

@section('content')
    <div>
        <div class="container-fluid">
            <div class="p-4 bg-white row">
                <h5>Create Service Provider</h5>

                {{-- Display general error message --}}
                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                {{-- Display validation errors --}}
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form class="form-horizontal" action="{{ route('service-providers.store') }}" enctype="multipart/form-data"
                    method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Role</label>
                                <input type="text" value="Wash Service Provider" class="form-control" disabled>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Name <span class="text-danger">*</span></label>
                                <input type="text" placeholder="Enter name" name="name" id="name"
                                    class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}"
                                    required />
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label id="mail">Email</label>
                                <input type="email" placeholder="Enter email" name="email" id="email"
                                    class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" />
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Phone <span class="text-danger">*</span></label>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-info text-white">+974</span>
                                    </div>
                                    <input type="text" placeholder="Enter phone number" name="phone" id="phone"
                                        class="form-control @error('phone') is-invalid @enderror"
                                        value="{{ old('phone') }}" required />
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Password <span class="text-danger">*</span></label>
                                <div class="input-group mb-3">
                                    <input type="password" placeholder="Enter password" name="password" id="password"
                                        class="form-control @error('password') is-invalid @enderror" required />
                                    <div class="input-group-append">
                                        <span class="input-group-text bg-info" id="basic-addon1">
                                            <a onclick="viewPassword()" style="cursor: pointer;">
                                                <i id="open" class="fas fa-eye mt-1 mb-1 mr-1 text-white"></i>
                                                <i id="close" class="fas fa-eye-slash mt-1 mb-1 mr-1 text-white"
                                                    hidden></i>
                                            </a>
                                        </span>
                                    </div>
                                </div>
                                @error('password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Title <span class="text-danger">*</span></label>
                                <input type="text" placeholder="Enter title" name="title" id="title"
                                    class="form-control @error('title') is-invalid @enderror" value="{{ old('title') }}"
                                    required />
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Description <span class="text-danger">*</span></label>
                                <textarea placeholder="Enter description" name="description" id="description"
                                    class="form-control @error('description') is-invalid @enderror" rows="4" required>{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Address</label>
                                <input type="text" placeholder="Enter address" name="address" id="address"
                                    class="form-control @error('address') is-invalid @enderror"
                                    value="{{ old('address') }}" />
                                @error('address')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Upload Logo</label>
                                <input type="file" name="image" id="image" accept="image/*"
                                    class="form-control @error('image') is-invalid @enderror">
                                <small class="form-text text-muted">Accepted formats: JPG, JPEG, PNG, GIF. Max size:
                                    2MB</small>
                                @error('image')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Active Status <span class="text-danger">*</span></label>
                                <select name="is_active" id="is_active"
                                    class="form-control @error('is_active') is-invalid @enderror" required>
                                    <option value="">Select Status</option>
                                    <option value="1" {{ old('is_active') == '1' ? 'selected' : '' }}>Active</option>
                                    <option value="0" {{ old('is_active') == '0' ? 'selected' : '' }}>Inactive
                                    </option>
                                </select>
                                @error('is_active')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Service Types (Select at least one) <span class="text-danger">*</span></label>
                                <div class="form-check">
                                    <input class="form-check-input @error('service_type') is-invalid @enderror"
                                        type="checkbox" name="is_carpet_service" id="is_carpet_service" value="1"
                                        {{ old('is_carpet_service') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_carpet_service">
                                        Carpet Cleaning Service
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input @error('service_type') is-invalid @enderror"
                                        type="checkbox" name="is_sofa_service" id="is_sofa_service" value="1"
                                        {{ old('is_sofa_service') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_sofa_service">
                                        Sofa Cleaning Service
                                    </label>
                                </div>
                                @error('service_type')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Commission Type <span class="text-danger">*</span></label>
                                <select name="commission_type" id="commission_type"
                                    class="form-control @error('commission_type') is-invalid @enderror" required>
                                    <option value="">Select Commission Type</option>
                                    <option value="fixed" {{ old('commission_type') == 'fixed' ? 'selected' : '' }}>Fixed
                                        Amount</option>
                                    <option value="percentage"
                                        {{ old('commission_type') == 'percentage' ? 'selected' : '' }}>Percentage</option>
                                </select>
                                @error('commission_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Commission Value <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" min="0" placeholder="Enter commission value"
                                    name="commission_value" id="commission_value"
                                    class="form-control @error('commission_value') is-invalid @enderror"
                                    value="{{ old('commission_value') }}" required />
                                <small class="form-text text-muted">For percentage, enter value between 0-100</small>
                                @error('commission_value')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <div class="col-lg-12 text-right">
                                    <button type="button" class="btn btn-secondary mr-2"
                                        onclick="history.back()">Cancel</button>
                                    <button type="submit" class="btn btn-info">Save Service Provider</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="text/javascript">
        function viewPassword() {
            var password = document.getElementById('password');
            var open = document.getElementById('open');
            var close = document.getElementById('close');

            if (password.type === 'password') {
                password.type = 'text';
                open.hidden = true;
                close.hidden = false;
            } else {
                password.type = 'password';
                open.hidden = false;
                close.hidden = true;
            }
        }

        // Form validation on submit
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.querySelector('form');
            const serviceCheckboxes = document.querySelectorAll(
                'input[name="is_carpet_service"], input[name="is_sofa_service"]');

            form.addEventListener('submit', function(e) {
                // Check if at least one service type is selected
                const isAnyServiceSelected = Array.from(serviceCheckboxes).some(checkbox => checkbox
                    .checked);

                if (!isAnyServiceSelected) {
                    e.preventDefault();
                    alert('Please select at least one service type.');
                    return false;
                }

                // Validate commission value based on type
                const commissionType = document.getElementById('commission_type').value;
                const commissionValue = parseFloat(document.getElementById('commission_value').value);

                if (commissionType === 'percentage' && commissionValue > 100) {
                    e.preventDefault();
                    alert('Percentage commission cannot exceed 100%.');
                    return false;
                }
            });
        });
    </script>
@endpush