@extends('layouts.app')
@section('title')
    SUPPLIER VIEW
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('supplier.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
<div class="card">

        <div class="card-body">
            <div class="row">
                <h5>Company Detail</h5>
            </div>
            <br>
            <div class="row mb-2">
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="name">Supplier Name:</label>
                        <div class="col-6">
                            <input type="text" class="form-control" id="name" name="name"
                                value="{{ $supplier->address }}" placeholder="Enter Supplier Name"
                                style="border-radius: 10px;">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="code">Supplier Code:</label>
                        <div class="col-6">
                            <input type="text" class="form-control" id="code" name="code"
                                value="{{ $supplier->code }}" placeholder="Enter Supplier Code"
                                style="border-radius: 10px;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mb-2">
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="phone_no">Phone No:</label>
                        <div class="col-6">
                            <input type="text" class="form-control" id="phone_no" name="phone_no"
                                value="{{ $supplier->phone_no }}" placeholder="Enter Phone No" style="border-radius: 10px;" min="0">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="fax">Fax:</label>
                        <div class="col-6">
                            <input type="text" class="form-control" id="fax" name="fax"
                                value="{{ $supplier->fax }}" placeholder="Enter Fax" style="border-radius: 10px;" min="0">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="address">Address:</label>
                        <div class="col-6">
                            <textarea name="address" id="address" class="form-control" rows="1" placeholder="Enter Address"
                                style="border-radius: 10px;">{{ $supplier->address }}</textarea>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="group">Group:</label>
                        <div class="col-6">
                            <select class="form-select custom-select-background" id="group" name="group" style="width: 100% !important;">
                                <option value="LOCAL" @if ($supplier->address == 'LOCAL') selected @endif>LOCAL</option>
                                <option value="OVERSEA" @if ($supplier->address == 'OVERSEA') selected @endif>OVERSEA</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <br>
            <div class="row">
                <h5>Contact Person Detail</h5>
            </div>
            <br>
            <div class="row mt-4">
                <div class="col-lg-6 col-sm-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="name">Name:</label>
                        <div class="col-6">
                            <input type="text" class="form-control" id="contact_person_name" name="contact_person_name"
                                value="{{$supplier->contact_person_name }}" placeholder="Enter Name" style="border-radius: 10px;">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="department">Department:</label>
                        <div class="col-6">
                            <input type="text" class="form-control" id="contact_person_department" name="contact_person_department"
                                value="{{ $supplier->contact_person_department }}" placeholder="Enter Department" style="border-radius: 10px;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-lg-6 col-sm-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="phone_office">Phone (Office):</label>
                        <div class="col-6">
                            <input type="text" class="form-control" id="contact_person_telephone" name="contact_person_telephone"
                                value="{{ $supplier->contact_person_telephone }}" placeholder="Enter Phone Office" style="border-radius: 10px;" min="0">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="phone_mobile">Phone (Mobile):</label>
                        <div class="col-6">
                            <input type="text" class="form-control" id="contact_person_mobile" name="contact_person_mobile"
                                value="{{ $supplier->contact_person_mobile }}" placeholder="Enter Phone Mobile" style="border-radius: 10px;" min="0">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-lg-6 col-sm-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="email">Email:</label>
                        <div class="col-6">
                            <input type="text" class="form-control" id="contact_person_email" name="contact_person_email"
                                value="{{ $supplier->contact_person_email }}" placeholder="Enter Email" style="border-radius: 10px;">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-12 mt-3">
                    <div class="row align-items-center">
                        <label class="form-label col-4" for="fax">Fax:</label>
                        <div class="col-6">
                            <input type="text" class="form-control" id="contact_person_fax" name="contact_person_fax"
                                value="{{ $supplier->contact_person_fax }}" placeholder="Enter Fax" style="border-radius: 10px;">
                        </div>
                    </div>
                </div>

            </div>
            <div class="d-flex justify-content-between align-items-center mt-2">
                    <h4 class="mb-0">Shipping Mode</h4>
                 
                </div>
                <div class="row">
                    @foreach ($supplier['shipping_mode'] as $key => $mode)
                    <div class="row mb-3"> 
                        <div class="col-md-5 d-flex align-items-center"> 
                            <label class="form-label col-md-4" for="shippingMode_{{ $key }}">
                                Shipping Mode:
                            </label>
                            <div class="col-md-7 mt-3" style="margin-left: 8%;">
                                <select class="form-select" id="shippingMode_{{ $key }}" name="shipping_mode[]" style="width: 100% !important;">
                                    <option value="truck" @selected($mode->shipping_mode == 'truck')>Truck</option>
                                    <option value="sea" @selected($mode->shipping_mode == 'sea')>Sea</option>
                                    <option value="air" @selected($mode->shipping_mode == 'air')>Air</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-5 d-flex align-items-center offset-1"> 
                            <label class="form-label col-md-4" for="leadTime_{{ $key }}">
                                Lead Time (Week):
                            </label>
                            <div class="col-md-7 mt-3" style="margin-left: 10%;" >
                                <div class="input-group">
                                    <input type="text" value="{{ $supplier['shipping_time'][$key]->lead_day }}" class="form-control" id="leadTime_{{ $key }}" name="lead_day[]">
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="mt-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <h4 class="mb-0">Shipping Point</h4>
                       
                    </div>
            <div id="shippingModesContainer" class="mt-3"></div>
            {{-- <div class="mt-3">
                <div class="d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">Shipping Point</h4>
                    <button type="button" id="addShippingLocationButton" class="btn btn-primary btn-md md-2">
                        <i class="bi bi-plus-square"></i> Add
                    </button>
                </div>

            </div> --}}
            @foreach ($supplier['shipping_location'] as $key => $time)

            <div class="row mt-3">
                <div class="col-lg-2">
                    <div class="form-group">
                        <label for="shipping_location" class="form-label">Shipping Point</label>
                    </div>
                </div>

                <div class="col-lg-9">
                    <div class="form-group input-group">
                        <input type="text" class="form-control" value="{{$time->shipping_location}}" id="shippingLocation" name="shipping_location[]">
                    </div>
                </div>

            </div>
            @endforeach

            <div id="shippingLocationsContainer" class="mt-2">
            </div>

        </div>


</div>
    <script>
        $('.card-body input, .card-body select, .card-body textarea').prop('disabled', true);
    </script>
@endsection