@extends('layouts.master')

@section('title', 'Edit City')

@section('pageCSS')
<style>
@media screen and (max-width:767px) {
    .mobile-style:nth-child(2n+1) {
        background-color: #f8f8f8;
    }
    .mobile-style {
        padding: 10px;
        margin: 15px 0;
        border: 1px solid #ddd;
        border-radius: 5px;
        box-shadow: 0 0 3px #ddd;
    }
    .mobile-style > div {
        margin: 5px 0;
    }
    .mobile-style {
        display: flex;
    }
    .mobile-style > div:nth-child(3) {
        order: 3;
    }
}
</style>
@endSection

@section('content')
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                @if(Session::has('success'))
                    <div class="alert alert-success">
                        {{ Session::get('success') }}
                    </div>
                @endif
                <div class="card card-primary">
                    <x-input-error :messages="$errors->get('name')" class="mt-2 alert-danger" />
                    <x-input-error :messages="$errors->get('state')" class="mt-2 alert-danger" />
                    <form method="post" action="{{ route('admin.city.update',$city->id) }}">
                        @csrf
                        <div class="card-header">
                        <span class="text-bold text-lg">City Details</span>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label for="cityState">State</label>
                                <select name="state" id="cityState" class="form-control select2" style="width: 100%;">
                                    @if($states)
                                    @foreach($states as $state)
                                    <option value="{{$state->id}}" {{ $state->id == $city->state  ? 'selected="selected"' : '' }}>{{ $state->state_name }}</option>
                                    @endforeach
                                    @endif
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="cityName">City Name</label>
                                <x-text-input id="cityName" class="form-control block mt-1 w-full" type="text" name="name" value="{{ $city->name }}" required autofocus autocomplete="name" placeholder="Enter Name" />
                            </div>

                            <div class="form-group">
                                <label for="enable-disable" class="d-block">Enable/Disable</label>
                                <input type="checkbox" name="status" data-bootstrap-switch data-off-color="danger" data-on-color="success" value="enable" {{ $city->status == 'enable' ? 'checked' : '' }} >
                            </div>

                        </div>
                        <!-- /.card-body -->

                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary">Update City</button>
                        </div>
                    </form>
                </div>
                <!-- /.card -->
            </div>


            <div class="col-md-6">
                @if(Session::has('addLocationSuccess'))
                    <div class="alert alert-success">
                        {{ Session::get('addLocationSuccess') }}
                    </div>
                @endif
                <div class="card card-primary">
                    @if(isset($location))
                    <x-input-error :messages="$errors->get('name')" class="mt-2 alert-danger" />
                    <x-input-error :messages="$errors->get('state')" class="mt-2 alert-danger" />
                    <form method="post" action="{{ route('admin.city.update',$city->id) }}">
                        @csrf
                        <input type="hidden" name="locID" value="{{ $location->id }}" />
                        <div class="card-header">
                            <span class="text-bold text-lg">Update Location</span>
                        </div>

                        <div class="card-body">
                            <div class="form-group">
                                <label for="locationName">Location Name</label>
                                <x-text-input id="locationName" class="form-control block mt-1 w-full" type="text" name="location_name" value="{{ $location->location }}" required autofocus autocomplete="name" placeholder="Enter Name" />
                            </div>

                            <div class="form-group">
                                <label for="locationPostcode">Post Code</label>
                                <x-text-input id="locationPostcode" class="form-control block mt-1 w-full" type="text" name="location_postcode" value="{{ $location->zip }}" autofocus required autocomplete="name" placeholder="Enter Name" />
                            </div>

                            <div class="form-group">
                                <label for="addLocationPrice">Price</label>
                                <div class="input-group block">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            $
                                        </span>
                                    </div>
                                    <x-text-input id="addLocationPrice" class="form-control block mt-1 w-full" type="text" name="price" value="{{ $location->price }}" autofocus autocomplete="name" placeholder="Enter Price" />
                                </div>
                            </div>
                        </div>
                        <!-- /.card-body -->

                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary">Update Location</button>
                        </div>
                    </form>
                    @else
                    <x-input-error :messages="$errors->get('name')" class="mt-2 alert-danger" />
                    <x-input-error :messages="$errors->get('state')" class="mt-2 alert-danger" />
                    <form method="post" action="{{ route('admin.city.update',$city->id) }}">
                        @csrf
                        <div class="card-header">
                            <span class="text-bold text-lg">Add Location</span>
                        </div>

                        <div class="card-body">
                            <div class="form-group">
                                <label for="locationName">Location Name</label>
                                <x-text-input id="locationName" class="form-control block mt-1 w-full" type="text" name="location_name" :value="old('location_name')" required autofocus autocomplete="name" placeholder="Enter Name" />
                            </div>

                            <div class="form-group">
                                <label for="locationPostcode">Post Code</label>
                                <x-text-input id="locationPostcode" class="form-control block mt-1 w-full" type="text" name="location_postcode" :value="old('location_postcode')" autofocus required autocomplete="name" placeholder="Enter Name" />
                            </div>

                            <div class="form-group">
                                <label for="addLocationPrice">Price</label>
                                <div class="input-group block">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            $
                                        </span>
                                    </div>
                                    <x-text-input id="addLocationPrice" class="form-control block mt-1 w-full" type="text" name="price" :value="old('price')" autofocus autocomplete="name" placeholder="Enter Price" />
                                </div>
                            </div>
                        </div>
                        <!-- /.card-body -->

                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary">Add Location</button>
                        </div>
                    </form>

                    @endif
                </div>
                <!-- /.card -->
            </div>

            <div class="col-md-12">
                @if(Session::has('locationSuccess'))
                    <div class="alert alert-success">
                        {{ Session::get('locationSuccess') }}
                    </div>
                @endif
                <div class="card card-primary">
                    <form method="post" action="{{ route('admin.city.update',$city->id) }}">
                    @csrf

                        <div class="card-header">
                            <button type="submit" class="btn btn-primary">Update Locations Status</button>
                        </div>
                        <div class="card-body">
                            @if($locations && count($locations) > 0)
                                @foreach($locations as $location)
                                    <div class="row mobile-style">
                                        <div class="col-4 col-md-2 col-lg-1">
                                            <input type="checkbox" name="city_locations[{{ $location->id }}]" data-bootstrap-switch data-off-color="danger" data-on-color="success" value="enable" {{ $location->status == 'enable' ? 'checked' : '' }} >
                                        </div>
                                        <div class="col-4 col-md-2 col-lg-1">
                                            <span class="bg-warning text-bold text-lg px-3 py-1">{{ $location->zip }}</span>
                                        </div>
                                        <div class="col-12 col-md-6 col-lg-8">
                                            <div class="form-group">
                                                <span class="text-bold text-lg">{{ $location->location }}</span>
                                            </div>
                                        </div>
                                        <div class="col-4 col-md-2 col-lg-2">
                                            <a href="{{ route('admin.city.location.edit',[$city->id,$location->id]) }}" class="btn btn-success text-right"><i class="fas fa-edit"></i></a>
                                            <a href="{{ route('admin.location.delete',$location->id) }}" class="btn btn-danger delete-item"><i class="fas fa-times"></i></a>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="row">
                                    <div class="col-md-10">
                                        <span>No Location added. please add location</span>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </form>
                </div>
            </div>
        </div>
      </div>
    </section>
    <!-- /.content -->
@endsection
@section('pageJS')
<script>
    $(function () {
        $("input[data-bootstrap-switch]").each(function(){
            $(this).bootstrapSwitch('state', $(this).prop('checked'));
        });

        $(".delete-item").on("click",function(e){
            var confirmed = confirm("Are you sure you want to delete?");
            if (!confirmed) {
                e.preventDefault();
            }
        })
    });
</script>
@endsection