@extends('company-client/layouts/contentNavbarLayout')

@section('title')
{{ __('client.vehicle_details') }}
@endsection


@section('page-script')

@endsection

@section('content')

<h1 class="fw-bold h4">{{ __('client.vehicle_details') }}</h1>

@include('company-client.responses.messages')

<div class="card my-4">
    <div class="card-header">
        <h3 class="h5 text-color">{{ __('client.general_informations') }}</h3>
    </div>
    <div class="card-body">
        <form action="{{ route('company-client.vehicle.update', $vehicle->id) }}" method="POST">
            @csrf
            <div class="row">
                <div class="col-md-4 mb-3">
                    <div class="form-group">
                        <label for="mark" class="form-label">{{ __('client.mark') }}</label>
                        <input type="text" class="form-control" id="mark" name="mark" value="{{ $vehicle->mark }}" readonly>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="form-group">
                        <label for="model" class="form-label">{{ __('client.model') }}</label>
                        <input type="text" class="form-control" id="model" name="model" value="{{ $vehicle->model }}" readonly>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="form-group">
                        <label for="version" class="form-label">{{ __('client.version') }}</label>
                        <input type="text" class="form-control" id="version" name="version" value="{{ $vehicle->version }}" readonly>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="form-group">
                        <label for="engine_type" class="form-label">{{ __('client.engine_type') }}</label>
                        <input type="text" class="form-control" id="engine_type" name="engine_type" value="{{ $vehicle->motor_type }}" readonly>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="form-group">
                        <label for="horse_power" class="form-label">{{ __('client.horse_power') }}</label>
                        <input type="text" class="form-control" id="horse_power" name="horse_power" value="{{ $vehicle->horse_power }}" @if($vehicle->search_method === Vehicle::STANDARD_SEARCH_METHOD) readonly @else required @endif>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <label for="gearbox" class="form-label">{{ __('client.gearbox') }}</label>
                    <select class="form-select" id="gearbox" name="gearbox" required>
                        <option value="">Sélectionner</option>
                        <option value="A" @if($vehicle->gearbox === Vehicle::GEARBOX_AUTO) selected @endif>Automatique</option>
                        <option value="M" @if($vehicle->gearbox !== Vehicle::GEARBOX_AUTO) selected @endif>Manuel</option>
                    </select>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="form-group">
                        <label for="numberplate" class="form-label">{{ __('client.numberplate') }}</label>
                        <input type="text" class="form-control" id="numberplate" name="numberplate" value="{{ $vehicle->numberplate }}" @if($vehicle->search_method === Vehicle::MATRICULATION_SEARCH_METHOD) readonly @else required @endif>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="form-group">
                        <label for="company" class="form-label">{{ __('client.company') }}</label>
                        <input type="text" class="form-control" id="company" name="company" value="{{ $vehicle->company?->name }}" readonly>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="form-group">
                        <label for="park" class="form-label">{{ __('client.park') }}</label>
                        <input type="text" class="form-control" id="park" name="park" value="{{ $vehicle->park }}" readonly>
                    </div>
                </div>
            </div>
            <div class="col text-center mt-3">
                <button type="submit" class="btn btn-primary">{{ __('client.save') }}</button>
            </div>
        </form>
    </div>
</div>

<div class="card my-4 pb-3">
    <div class="card-header">
        <h3 class="h5 text-color">{{ __('client.gray_card') }}</h3>
    </div>
    <div class="card-body">
        <form action="{{ route('company-client.vehicle.gray-card.update', $vehicle->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row mb-4">
                <div class="col-md-6">
                    <h5>Le recto de la carte grise</h5>
                    @if ($vehicle->gray_card_front)
                        @if(\File::extension($vehicle->gray_card_front) === 'pdf')
                            <iframe src="{{ asset($vehicle->gray_card_front) }}" frameborder="0" width="100%" height="500px"></iframe>
                        @else
                            <img src="{{ asset($vehicle->gray_card_front) }}" alt="Vehicle front gray card" width="450">
                        @endif
                    @else
                        <p>Vous n'avez pas encore ajouté le recto de la carte grise</p>   
                    @endif
                </div>
                <div class="col-md-6">
                    <h5>Upload a new one</h5>
                    <div class="col">
                        <input data-show-upload="false" id="gray-card-front" name="gray_card_front" type="file" accept="image">
                    </div>
                </div>
            </div>
            </div>
            <div class="col text-center">
                <button type="submit" class="btn btn-primary">{{ __('client.save') }}</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {

        $("#gray-card-front").fileinput({
            language: 'fr',
            theme: "bs5",
            uploadUrl: "#",
            maxFileSize: 2000,
            allowedFileExtensions: ['jpg', 'png', 'jpeg'],
            removeFromPreviewOnError: true,
            showDrag: true,
            dropZoneTitle: 'Drop le recto de la carte grise ici',
            browseLabel: 'Parcourir',
            cancelLabel: 'Annuler',
            removeLabel: 'Supprimer',
            maxFileCount: 1,
            fileActionSettings: {
                showRotate: false,
                showZoom: false,
                showUpload: false
            }
        });
    });

</script>
@endsection