@extends('admin.layout.master')
@section('content')
@section('add-post', 'active')
@section('title', 'Post Ad')
@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
    <style>
        .iti.iti--allow-dropdown {
            width: 100% !important;
        }
    </style>
@endpush
<!--start page wrapper -->
<div class="page-wrapper">
    <div class="page-content">
        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Categories</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page"></li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                <div class="btn-group">
                    <a href="{{ route('admin.view.ads') }}">
                        <button type="button" class="btn btn-primary">View Listings</button>
                    </a>

                </div>
            </div>
        </div>
        <!--end breadcrumb-->
        {{-- <div class="col-xl-10 mx-auto">
            <h6 class="mb-0 text-uppercase">Post Ad</h6>
            <hr />
            <!-- Categories Header -->
            <div class="mb-4">
                <h5 class="text-primary" style="text-align: center;text-transform: uppercase">Categories</h5>
                <hr>
                <br>
                <ul class="nav nav-pills">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Car</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Properties</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Mobiles</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Bikes</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Electronics</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Furniture</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Fashion</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Toys</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Jewellery</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Decor Items</a>
                    </li>
                    <!-- Add more categories as needed -->
                </ul>
            </div>
            <div class="card border-top border-0 border-4 border-primary">
                <div class="card-body p-5">
                    <div class="card-title d-flex align-items-center">
                        <div><i class="bx bxs-user me-1 font-22 text-primary"></i>
                        </div>
                        <h5 class="mb-0 text-primary">Post Ad</h5>
                    </div>
                    <hr>
                    <form class="row g-3" wire:submit="addFreelancer">
                        <div class="col-md-4">
                            <label for="inputFirstName" class="form-label">FirstName</label>
                            <input type="text" class="form-control" id="inputFirstName" wire:model.lazy="first_name">
                            @error('first_name')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label for="inputLastName" class="form-label">LastName</label>
                            <input type="text" class="form-control" id="inputLastName" wire:model.lazy="last_name">
                            @error('last_name')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label for="inputPrice" class="form-label">Price</label>
                            <input type="number" class="form-control" id="inputPrice" wire:model.lazy="price">
                            @error('price')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label for="inputEmail" class="form-label">Email</label>
                            <input type="email" class="form-control" id="inputEmail" wire:model.lazy="email">
                            @error('email')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label for="inputPhone" class="form-label">Phone</label>
                            <div class="w-100" wire:ignore>
                                <input type="tel" class="form-control" id="inputPhone">
                            </div>
                            @error('country')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                            @error('countryCode')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                            @error('phone')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label for="inputCity" class="form-label">City</label>
                            <input type="text" class="form-control" id="inputCity" wire:model.lazy="city">
                            @error('city')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-8">
                            <label for="inputGithubURL" class="form-label">Github URL</label>
                            <input type="url" class="form-control" id="inputGithubURL"
                                wire:model.lazy="github_link">
                            @error('github_link')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label for="inputProject" class="form-label">Projects</label>
                            <input type="number" class="form-control" id="inputProject" wire:model.lazy="projects">
                            @error('projects')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-8">
                            <label for="inputLinkdn" class="form-label">Linkedin</label>
                            <input type="url" class="form-control" id="inputLinkdn" wire:model.lazy="linkdin">
                            @error('linkdin')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label for="inputRating" class="form-label">Rating</label>
                            <input type="number" class="form-control" id="inputRating" wire:model.lazy="rating">
                            @error('rating')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="inputImage" class="form-label">Image</label>
                            <input type="file" class="form-control" id="inputImage" wire:model.lazy="image"
                                accept="image/*">
                            @error('image')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="inputCertificates" class="form-label">Certificates</label>
                            <input type="file" class="form-control" id="inputCertificates"
                                wire:model.lazy="certificate" multiple>
                            @error('certificate')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label for="inputSkills" class="form-label">Skills</label>
                            <div class="w-100" wire:ignore>
                                <input type="text" class="form-control" data-role="tagsinput" id="inputSkills"
                                    wire:model.lazy="skills">
                            </div>
                            @error('skills')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label for="inputMainCategory" class="form-label">Main Category</label>
                            <div class="w-100" wire:ignore>
                                <input type="text" class="form-control" data-role="tagsinput"
                                    id="inputMainCategory" wire:model.lazy="main_category">
                            </div>
                            @error('main_category')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label for="inputLanguages" class="form-label">Languages</label>
                            <div class="w-100" wire:ignore>
                                <input type="text" class="form-control" data-role="tagsinput" id="inputLanguages"
                                    wire:model.lazy="languages">
                            </div>
                            @error('languages')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label for="inputDescription" class="form-label">Description</label>
                            <textarea class="form-control" id="inputDescription" wire:model.lazy="description"></textarea>
                            @error('description')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label for="inputExperience" class="form-label">Experience</label>
                            <textarea class="form-control" id="inputExperience" wire:model.lazy="experience"></textarea>
                            @error('experience')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <h3 class="mt-4">Bank Detail:</h3>
                        <div class="col-md-4">
                            <label for="inputBankName" class="form-label">Bank Name</label>
                            <input type="text" class="form-control" id="inputBankName"
                                wire:model.lazy="bank_name">
                            @error('bank_name')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label for="inputAccountType" class="form-label">Account Type</label>
                            <input type="text" class="form-control" id="inputAccountType"
                                wire:model.lazy="account_type">
                            @error('account_type')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label for="inputAccountHolderName" class="form-label">Account Holder Name</label>
                            <input type="text" class="form-control" id="inputAccountHolderName"
                                wire:model.lazy="account_holder_name">
                            @error('account_holder_name')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="inputBankAccountNumber" class="form-label">Bank Account Number</label>
                            <input type="text" class="form-control" id="inputBankAccountNumber"
                                wire:model.lazy="bank_account_number">
                            @error('bank_account_number')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="inputBankUniqueCode" class="form-label">Bank Unique Code</label>
                            <input type="text" class="form-control" id="inputBankUniqueCode"
                                wire:model.lazy="bank_unique_code">
                            @error('bank_unique_code')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary px-5" style="float: right">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div> --}}

        <div class="container">
            <div class="row">
                <!-- Categories Column -->
                {{-- <div class="col-xl-3">
                    <h5 class="text-primary text-center text-uppercase">Categories</h5>
                    <hr>
                    <ul class="nav nav-pills flex-column">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">Car</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Properties</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Mobiles</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Bikes</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Electronics</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Furniture</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Fashion</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Toys</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Jewellery</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Decor Items</a>
                        </li>
                        <!-- Add more categories as needed -->
                    </ul>
                </div> --}}

                <!-- Form Column -->
                <div class="col-xl-12">
                    <h6 class="mb-0 text-uppercase">Categories</h6>
                    <hr />
                    <div class="card border-top border-0 border-4 border-primary">
                        <div class="card-body p-5">
                            <div class="card-title d-flex align-items-center">
                                <div><i class="bx bxs-user me-1 font-22 text-primary"></i></div>
                                <h5 class="mb-0 text-primary">Categories</h5>
                            </div>
                            <hr>
                            <form class="row g-3" action="{{route('admin.sent_categoryname_to_next_page')}}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="col-md-12">
                                    <label for="inputFirstName" class="form-label">Select Category</label>
                                    <select name="category_name" id="" class="form-control">
                                        <option value="">Select Category</option>
                                        @foreach($categories as $category)
                                            <option value="{{$category->category_name}}" required>
                                                {{$category->category_name}}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('brand_name')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>


                                <div class="col-12">
                                    <button type="submit" id="" class="btn btn-primary px-5" style="float: right">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <!--end row-->
    </div>
</div>
<!--end page wrapper -->
@endsection

@section('script')
@stack('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.getElementById('submitBtn').addEventListener('click', function () {
            Swal.fire({
                title: 'Are you sure?',
                text: "You are about to submit this form.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, submit it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Submit the form if confirmed
                    document.getElementById('adForm').submit();
                }
            });
        });
    </script>
@endsection