@extends('layouts.master')

@section('page_title', 'Add User')
@section('title', 'User Details')
@section('main_item', 'User')
@section('sub_item', 'Add User')

@section('content')

    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <h4 class="mt-0 header-title">Add User</h4>
                <p class="text-muted mb-3"></p>
                <form id="userForm" class="" method="POST" action="{{ route('users.store') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label style="font-weight: bold" for="name">Name</label>
                                <input type="text" placeholder="Name" class="form-control" id="name" name="full_name"
                                    required="">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label style="font-weight: bold" for="branch_id">Branch</label>
                                <select class="form-control" id="branch_id" name="branch_id">
                                    @foreach ($branches as $branch)
                                        <option value="{{ $branch->id }}">{{ $branch->branch_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label style="font-weight: bold" for="user_type">User Type</label>
                                <select class="form-control" id="user_type" name="user_type">
                                        <option value="sub_user">Sub User</option>
                                        <option @if(auth()->user()->user_type == 'new_receller' || auth()->user()->user_type == 'sub_user') style="display: none;" @endif value="system_user">System User</option>
                                        <option @if(auth()->user()->user_type == 'new_receller') style="display: none;" @endif value="new_receller">New {{$settings->display_term}}</option>
                                        <option @if(auth()->user()->user_type == 'new_receller') style="display: none;" @endif value="new_direct_receller">New Direct {{$settings->display_term}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="required" for="roles">Roles</label>
                            <div style="padding-bottom: 4px">
                                <span class="btn btn-info btn-xs select-all" style="border-radius: 0">Select All</span>
                                <span class="btn btn-info btn-xs deselect-all" style="border-radius: 0">Deselect All</span>
                            </div>
                            <select class="form-control select2 {{ $errors->has('roles') ? 'is-invalid' : '' }}"
                                name="roles[]" id="roles" multiple required>
                                @foreach ($roles as $id => $roles)
                                    <option value="{{ $id }}"
                                        {{ in_array($id, old('roles', [])) ? 'selected' : '' }}>
                                        {{ $roles }}</option>
                                @endforeach
                            </select>
                            @if ($errors->has('roles'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('roles') }}
                                </div>
                            @endif

                        </div>
                        <input type="hidden" name="role_id" value="1">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label style="font-weight: bold" for="p_number">Phone Number</label>
                                <input type="text" pattern="0[0-9]{9}" maxlength="10" required title="Phone number must be exactly 10 digits and start with 0" placeholder="Phone Number" class="form-control" id="p_number" name="phone_no">

                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label style="font-weight: bold" for="user_email">Email</label>
                                <input type="email" placeholder="Email" class="form-control" id="user_email" name="email"
                                    required="">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label style="font-weight: bold" for="username">Username</label>
                                <input type="text" placeholder="Username" class="form-control" id="username"
                                    name="username" required="">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label style="font-weight: bold" for="password">Password</label>
                                <input type="password" placeholder="Password" class="form-control" id="password"
                                    name="password" required="">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label style="font-weight: bold" for="re_password">Re-enter Password</label>
                                <input type="password" placeholder="Re-enter Password" class="form-control"
                                    id="re_password" name="re_password" required="">
                                <small class="text-danger" id="passwordError" style="display: none; font-weight: bold">Passwords do not match</small>
                            </div>
                        </div>
                        <div class="col-md-3" @if($user->user_type == 'new_receller') 
                            style="display:none;"
                        @endif >
                            <div class="form-group">
                                <label style="font-weight: bold" for="return_fee">Add Return Fee (for resellers & sub users)</label>
                                <input type="text" placeholder="Add Retuurn Fee" class="form-control"
                                    id="return_fee" name="return_fee">
                            </div>
                        </div>
                        @can('new_reseller_create')
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label style="font-weight: bold" for="courier_id">Courier</label>
                                    <select class="form-control" id="courier_id" name="courier_id">
                                        @foreach ($couriers as $courier)
                                            <option value="{{ $courier->id }}">{{ $courier->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        @endcan
                    </div>

                     <div id="dropship-container">
    @if ($settings->dropship_option == '1')
        <label style="font-weight: bold" for="user_email" class="font-15">{{$settings->display_term}} Option</label><br>
        <hr>
        <div class="row dropship-item">
            <div class="col-md-3">
                <div class="form-group">
                    <label style="font-weight: bold" for="courier_id">Store Logo</label>
                    <input class="form-control dropify" type="file" name="stores[store_logo][]" id="store_logo" accept="image/*" required>
                    <br><br>
                    <img src="{{ asset($settings->image ?? 'default.png') }}" class="img-fluid" style="width: auto;height: 2cm;object-fit: cover">
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label style="font-weight: bold" for="store_name">Store Name</label>
                    <input type="text" placeholder="Store Name" class="form-control" id="store_name" name="stores[store_name][]" required>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label style="font-weight: bold" for="store_address">Store Address</label>
                    <input type="text" placeholder="Store Address" class="form-control" id="store_address" name="stores[store_address][]" required>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label style="font-weight: bold" for="store_contact">Store Contact</label>
                    <input type="text" placeholder="Store Contact" class="form-control" id="store_contact" name="stores[store_contact][]" pattern="0[0-9]{9}" maxlength="10" minlength="10" title="Mobile number must start with 0 and be exactly 10 digits" required>
                </div>
            </div>
        </div>
    @endif
</div>

<!-- Button to add new rows -->
<button type="button" class="btn btn-secondary" id="add-dropship-item">Add New Store</button>  
                     

                    <div class="row">
                        <div class="col-sm-12 text-right">
                            <button type="submit" class="btn btn-primary px-5 py-2">Save</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
<script>
    $(document).ready(function() {

        $('.select-all').click(function() {
            $('#roles > option').prop('selected', true);
            $('#roles').trigger('change');  
        });

        $('.deselect-all').click(function() {
            $('#roles > option').prop('selected', false);
            $('#roles').trigger('change');
        });
    $('#userForm').on('submit', function(event) {
        let isValid = true;

        //password validation
        const password = $('#password').val();
        const rePassword = $('#re_password').val();
        if (password !== rePassword) {
            $('#passwordError').show();
            isValid = false;
        } else {
            $('#passwordError').hide();
        }

        if (!isValid) {
            event.preventDefault();
        }
    });

        document.getElementById('add-dropship-item').addEventListener('click', function () {
        const container = document.getElementById('dropship-container');
        const newRow = document.createElement('div');
        newRow.classList.add('row', 'dropship-item');
        newRow.innerHTML = `
            <div class="col-md-3">
                <div class="form-group">
                    <label style="font-weight: bold">Store Logo</label>
                    <input class="form-control dropify" type="file" name="stores[store_logo][]" accept="image/*">
                    <br><br>
                    <img src="{{ asset($settings->image ?? 'default.png') }}" class="img-fluid" style="width: auto;height: 2cm;object-fit: cover">
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label style="font-weight: bold">Store Name</label>
                    <input type="text" placeholder="Store Name" class="form-control" name="stores[store_name][]" required>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label style="font-weight: bold">Store Address</label>
                    <input type="text" placeholder="Store Address" class="form-control" name="stores[store_address][]" required>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label style="font-weight: bold">Store Contact</label>
                    <input type="text" placeholder="Store Contact" class="form-control" name="stores[store_contact][]" required>
                </div>
            </div>
        `;
        container.appendChild(newRow);

        $(newRow).find('.dropify').dropify();
    });
});

</script>
@endsection