@extends('layouts.master')
@section('title')
    Contact Us
@endsection

@section('css')
    <script src="{{ asset('custom_js/upload-image.js') }}" defer></script>
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            Contact
        @endslot
        @slot('title')
            Content
        @endslot
    @endcomponent

    <div class="card info-card pt-5 ps-3">
        <div class="card-body">
            <form action="{{ route('contact.update', $contact->id) }}" method="post" enctype="multipart/form-data">
                @csrf

                <div class="row">
                    <div class="col-12 mb-3">
                        <div class="card">
                            <div class="card-body">
                                <img src="{{ asset('uploads/contact/' . $contact->banner_image) }}" alt="image" class="d-block rounded" width="150" height="90" id="uploadedAvatar" />
                                <br>
                                <div class="form-group">
                                    <label for="upload" class="btn btn-primary me-2 mb-2" tabindex="0">
                                        <span class="d-none d-sm-block">Upload Image Here</span>
                                        <i class="bx bx-upload d-block d-sm-none"></i>
                                        <input class="form-control account-file-input" type="file" name="banner_image" id="upload" hidden>
                                    </label>
                                    <button type="button" class="btn btn-outline-secondary account-image-reset mb-2">
                                        <i class="bx bx-reset d-block d-sm-none"></i>
                                        <span class="d-none d-sm-block">Reset</span>
                                    </button>
                                </div>
                                <span class="text text-info" style="font-size: 11px">The image is preferred to be 3000 x 2327</span>
                                @error('banner_image')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="banner_title" class="form-label">Banner Title</label>
                        <input type="text" class="form-control" name="banner_title" value="{{ old('banner_title', $contact->banner_title) }}" />
                        @error('banner_title')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-6 mb-3">
                        <label for="banner_subtitle" class="form-label">Banner Sub Title</label>
                        <input type="text" class="form-control" name="banner_subtitle" value="{{ old('banner_subtitle', $contact->banner_subtitle) }}" />
                        @error('banner_subtitle')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-6 mb-3">
                        <label for="banner_contact_title" class="form-label">Banner Contact Title</label>
                        <input type="text" class="form-control" name="banner_contact_title" value="{{ old('banner_contact_title', $contact->banner_contact_title) }}" />
                        @error('banner_contact_title')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-6 mb-3">
                        <label for="banner_contact_slogan" class="form-label">Banner Contact Slogan</label>
                        <input type="text" class="form-control" name="banner_contact_slogan" value="{{ old('banner_contact_slogan', $contact->banner_contact_slogan) }}" />
                        @error('banner_contact_slogan')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <hr>

                    <div class="col-6 mb-3">
                        <label for="email" class="form-label">Email</label>
                        <input type="text" class="form-control" name="email" value="{{ old('email', $contact->email) }}" />
                        @error('email')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-6 mb-3">
                        <label for="mobile" class="form-label">Mobile</label>
                        <input type="text" onkeypress="return isNumberKey(event)" class="form-control" name="mobile" value="{{ old('mobile', $contact->mobile) }}" />
                        @error('mobile')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-12 mb-3">
                        <label for="address" class="form-label">Address</label>
                        <textarea class="form-control" rows="5" name="address">{{ old('address', $contact->address) }}</textarea>
                        @error('address')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <hr>
                <button type="submit" class="btn btn-round btn-success col-md-1 me-2">Save</button>
            </form>
        </div>
    </div>
@endsection
@section('js')
    <script src="{{ asset('custom_js/is_number_key.js') }}"></script>
@endsection