@extends('admin.layouts.master')
@section('headerFiles')
    <link rel="stylesheet" type="text/css" href="{{ admin_asset('admin-assets/plugins/table/datatable/datatables.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ admin_asset('admin-assets/plugins/table/datatable/custom_dt_zero_config.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ admin_asset('admin-assets/plugins/jqvalidation/custom-jqBootstrapValidation.css') }}">
    <link href="{{ admin_asset('admin-assets/plugins/notification/toastr/toastr.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- END GLOBAL MANDATORY STYLES -->    
    <style type="text/css">
        .error{
            color: red;
            display: block;
        }

    </style>
@endsection

@section('content')

<div class="container">
    <div class="page-header">
        <div class="page-title">
            <h3>{{ $page_title }}</h3>
        </div>
    </div>

    <div class="row layout-spacing ">
        @if ( session('error'))
            <div class="alert alert-danger alert-dismissable custom-danger-box" style="margin: 15px;">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                <strong> {{ session('error') }} </strong>
            </div>
        @endif

        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12  layout-spacing">
            <div class="statbox widget box box-shadow">
                
                <div class="widget-content widget-content-area">
                    <form method="post" action="{{route('admin.areas.save')}}" id="admin-form" enctype="multipart/form-data">
                        <input type="hidden" name="id" value="{{ $area->id }}">
                        @csrf
                        <div class="row  d-flex justify-content-between align-items-center">
                            <div class="col-md-6 form-group">
                                <label>Area Name En *</label>
                                <input type="text" name="name_en" class="form-control jqv-input" data-jqv-required="true"
                                    value="{{$area->name_en}}" placeholder="Area Name En" required>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>Area Name Ar *</label>
                                <input type="text" name="name_ar" class="form-control jqv-input" data-jqv-required="true"
                                    value="{{$area->name_ar}}" placeholder="Area Name Ar" required>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>City *</label>                                            
                                <select class="custom-select" name="city_id" id="city_id" required>
                                    <option value="">Select City</option>
                                    @foreach ($cities as $type)
                                    <option value="{{ $type->id }}" {{ $area->city_id == $type->id ? "selected" : ""}} >{{ $type->city_name_en }}</option>    
                                    @endforeach                                
                                </select>
                            </div>
                            
                            <div class="col-md-6 form-group row mt-5">
                               
                                <div class="col-md-3 col-sm-12">  
                                    <div class="custom-control custom-checkbox checkbox-primary">
                                        <input type="checkbox" class="custom-control-input"   name="status" id="status"  value="1" {{ $area->status == 1 ? "checked" : ""}}>
                                        <label class="custom-control-label" for="status">Status</label>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-12">  
                                    <div class="custom-control custom-checkbox checkbox-primary">
                                        <input type="checkbox" class="custom-control-input"   name="is_featured" id="is_featured" value="1"  {{ $area->is_featured == 1 ? "checked" : ""}}>
                                        <label class="custom-control-label" for="is_featured">Featured</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>Upload Image @if ($area->banner_image != '') <a target="blank" href="{{ $area->banner_image }}"><i class="flaticon-eye"></i></a> @endif</label>
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input jqv-input" name="banner_image"
                                        data-role="file-image" data-width="320" data-height="200" data-preview="image-preview" 
                                        data-jqv-required="true" name="image" id="product-image" accept=".jpg, .jpeg, .png">
                                    <label class="custom-file-label" for="customFile">Choose file</label>
                                </div>
                            </div>
                            @if ($area->banner_image)
                            <div  class="col-md-6 form-group" >
                                <img id="image-preview" style="width:100px; height:90px;" class="img-responsive mb-2"  data-image="{{public_url()}}{{ $area->banner_image }}" src="{{public_url()}}{{ $area->banner_image }}">
                              </div>
                              @endif
                            <div class="col-md-12 text-center mt-3">
                                <button type="submit" class="mt-4 btn btn-button-7">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
    </div>

</div>

@endsection

@section('footerJs')
<script src="{{ admin_asset('admin-assets/plugins/jqvalidation/jqBootstrapValidation-1.3.7.min.js') }}"></script>
<script src="{{ admin_asset('admin-assets/plugins/jqvalidation/jqBootstrapValidation-1.3.7.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.js"></script>


@endsection