@extends('layouts.master', ['title' => 'Add Dealer - Dealer - Pages'])

@section('workspace')

    <!-- Breadcrumb -->
    <section class="breadcrumb">
        <h1>Dealer</h1>
        <ul>
            <li><a href="#no-link">Pages</a></li>
            <li class="divider la la-arrow-right"></li>
            <li><a href="#no-link">Dealer</a></li>
            <li class="divider la la-arrow-right"></li>
            <li>Add New Dealer</li>
        </ul>
    </section>

    <div class="grid lg:grid-cols-4 gap-5">

        <!-- Content -->
        <div class="lg:col-span-2 xl:col-span-3">

            <form method="POST" action="{{route('admin.dealers.add')}}" >
                @csrf
                <div class="card p-5">

                    {{--Company Name--}}
                    <div class="mb-5 xl:w-1/2">
                        <label class="label block mb-2" for="company_name">Company Name</label>
                        <input id="company_name" name="company_name" type="text" class="form-control" required>
                    </div>

                    {{--Company Email--}}
                    <div class="mb-5 xl:w-1/2">
                        <label class="label block mb-2" for="email">Company Email address</label>
                        <input id="email" name="email" type="email" class="form-control" required>
                    </div>

                    {{--Contact Number--}}
                    <div class="mb-5 xl:w-1/2">
                        <label class="label block mb-2" for="contact_number">Contact Number</label>
                        <input id="contact_number" placeholder="60123456789" name="contact_number" type="tel" class="form-control" required>
                    </div>

                    {{--State--}}
                    <div class="mb-5 xl:w-1/2">
                        <label class="label block mb-2" for="state">State</label>
                        <div class="custom-select">
                            <select name="state" class="form-control">
                                <option value="johor" selected>Johor</option>
                                <option value="kedah">Kedah</option>
                                <option value="kelantan">Kelantan</option>
                                <option value="kuala lumpur">Kuala Lumpur</option>
                                <option value="labuan">Labuan</option>
                                <option value="melaka">Melaka</option>
                                <option value="negeri sembilan">Negeri Sembilan</option>
                                <option value="pahang">Pahang</option>
                                <option value="penang">Penang</option>
                                <option value="perak">Perak</option>
                                <option value="perlis">Perlis</option>
                                <option value="putrajaya">Putrajaya</option>
                                <option value="sabah">Sabah</option>
                                <option value="sarawak">Sarawak</option>
                                <option value="selangor">Selangor</option>
                                <option value="terengganu">Terengganu</option>
                            </select>
                            <div class="custom-select-icon la la-caret-down"></div>
                        </div>
                    </div>



                    {{--Status--}}
                    <div class="mb-5 xl:w-1/2">
                        <label class="label block mb-2" for="slug">Account Status</label>
                        <label class="switch">
                            <input name="status" value="active" type="checkbox">
                            <span></span>
{{--                            <span>Activated</span>--}}
                        </label>
                    </div>

                    <div class="flex flex-wrap gap-2 mt-5">
                        <button class="btn btn_outlined btn_secondary uppercase"  >Cancel</button>
                        <button type="submit" class="btn btn_primary uppercase">Save</button>

                    </div>

                </div>
            </form>


        </div>


    </div>




@endsection
